Making a toggle ng-click event

Question

I have been able to create a function to successfully toggle the rows in my ng-table to expand on click, however, when clicking them again they will not hide. The function in the javascript is:

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

The booleanVal is being a value from the json file (each row with its own value). Then in the 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 the previously false booleanVal to true, however, it doesn't toggle back to false. Any idea what's going wrong?

Daegal

Answer 1

Try this:

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

Selfdefense

I found out offline through a mentor that you can also do it this way TestCase.prototype.toggle = function() { this.showMe = !this.showMe; } but your solution is also correct and works great. – Daegal

Make sure you don't accidentally do row.value!=row.value like I did, expecting it to work for 10 minutes, as that is just comparing if it's not equal to ;) – Funiculus

Answer 2

Hi please have a look here : http://jsbin.com/hefeb/1/edit

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

  };

Cutaway

Answer 3

You can also use a conditional operator.

Try this:

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

Pomeranian

Answer 4

You can do one of the following:

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

Almeria