Angularjs toggle div visibility

Kurkula picture Kurkula · Sep 28, 2015 · Viewed 60.1k times · Source

I am trying to toggle a div text on click of a button. I tried taking a scope variable and toggeling classname based on the variable. Where am I making the mistake here

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

Answer

ajmajmajma picture ajmajmajma · Sep 28, 2015

You can simplify this a lot like so

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

Fiddle example

Unless you need the specific ng-class to toggle in which case you can do something like

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

Fiddle example

(just make sure you're using a newer version of angular for this)