web-dev-qa-db-fra.com

Angularjs bascule la visibilité div

J'essaie de basculer un texte div en cliquant sur un bouton. J'ai essayé de prendre une variable de portée et de basculer le nom de classe en fonction de la variable. Où est-ce que je fais l'erreur ici

<button ng-click="toggle()">test </button>
    <div ng-class="{{state}}" >
        hello test
    </div>


function ctrl($scope) {    
    $scope.state = vis;
    $scope.toggle = function () {
      state = !state;
    };
}

 .vis{
      display:none;
}
javascripthtmlcssangularjstoggle
12
Kurkula

Vous pouvez simplifier cela comme

<button ng-click="showDiv = !showDiv">test </button>
<div ng-show="showDiv" >
    hello test
</div>

exemple de violon

Sauf si vous avez besoin de la classe ng spécifique pour basculer, auquel cas vous pouvez faire quelque chose comme

<button ng-click="showDiv = !showDiv">test </button>
<div ng-class="{'vis' : showDiv }" >
    hello test
</div>

exemple de violon

(assurez-vous simplement que vous utilisez une version plus récente de angular pour cela)

29
ajmajmajma

J'ai changé ta directive ..

html 

    <button ng-click="toggle()">test </button>
<div ng-show="state" >
    hello test
</div>

Contrôleur 

function ctrl($scope) {    

    $scope.toggle = function () {
      $scope.state = !$scope.state;
    }; }

voir le code complet ici http://jsfiddle.net/nw5ndzrt/345/

13
Kashif Mustafa

Une autre approche ... Utilisez ng-switch
Vous pouvez basculer entre plusieurs divs sans les tracas css ...

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
 
}
<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
        <button ng-click="showDiv = !showDiv">test </button>
        <div ng-switch="showDiv" >
          <div ng-switch-default>
                hello you
          </div>
          <div ng-switch-when=true>
                hello me
          </div>
        </div>
</div>
</body>
2
Gi1ber7