it-swarm.com.de

Angularjs schaltet die Sichtbarkeit um

Ich versuche, einen Div-Text durch Klicken auf eine Schaltfläche umzuschalten. Ich habe versucht, eine Bereichsvariable zu verwenden und den Klassennamen basierend auf der Variablen umzuschalten. Wo mache ich den Fehler hier

<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;
}
12
Kurkula

Sie können dies sehr stark vereinfachen

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

Geigenbeispiel

Es sei denn, Sie benötigen die spezifische ng-Klasse, um umzuschalten. In diesem Fall können Sie so etwas tun

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

Geigenbeispiel

(Stellen Sie einfach sicher, dass Sie eine neuere Version von angular) verwenden.)

29
ajmajmajma

Ich habe deine richtlinie geändert.

html

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

Controller

function ctrl($scope) {    

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

den vollständigen Code finden Sie hier http://jsfiddle.net/nw5ndzrt/345/

13
Kashif Mustafa

Ein anderer Ansatz ... Verwenden Sie ng-switch
Sie können durch mehrere Divs ohne den CSS-Aufwand wechseln ...

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