Angularjs переключить div видимость

Я пытаюсь переключить div текст по щелчку кнопки. Я попытался взять переменную scope и toggeling classname на основе переменной. Где я делаю ошибку здесь 

<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;
}
3 12
javascript angularjs html css toggle

3 ответа:

Это можно упростить примерно так 

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

Пример скрипки

Если вам не нужен конкретный ng-класс для переключения, в этом случае вы можете сделать что-то вроде

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

Пример скрипки

(Просто убедитесь, что вы используете более новую версию angular для этого)

25

Я изменил вашу директиву..

Html 

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

Контроллер 

function ctrl($scope) {    

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

Смотрите полный код здесь http://jsfiddle.net/nw5ndzrt/345/

13

Другой подход... Использовать ng-переключатель
Вы можете переключаться между несколькими дивами без хлопот 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