Create ng-click switch event

Question

I managed to create a function for successfully switching rows in my ng table to expand on click, however, when clicked again, they will not be hidden. Function in javascript:

$scope.toggle = function() { return !this.booleanVal; }; 

booleanVal is the value from the json file (each line with its own value). Then in HTML.

 <p class="row_description more" ng-click="row.booleanVal = toggle()">{{row.description}</p> <div class="check-element animate-show" ng-show="row.booleanVal"> 

It works for the first click, turning previously false booleanVal to true , however it does not toggle return to false . Any idea what goes wrong?

Answer 1

Try the following:

 <p class="row_description more" ng-click="row.booleanVal = !row.booleanVal"> {{row.description} </p> <div class="check-element animate-show" ng-show="row.booleanVal"></div> 

Answer 2

Hi, please see here: http://jsbin.com/hefeb/1/edit

  $scope.toogle = function(i) { i.booleanVal = !i.booleanVal }; 

Answer 3

You can also use the conditional operator.

Try the following:

 <p class="row_description more" ng-click="row.booleanVal =row.booleanVal?false:true"> {{row.description}} </p> <div class="check-element animate-show" ng-show="row.booleanVal"></div> 

Answer 4

You can do one of the following:

• Use this.row.booleanVal in the toggle() function
• Directly switch the boolean value in the ngClick directive: ng-click="row.booleanVal = !row.booleanVal"