Toggle checkbox in Angular JS repeater table by clicking enclosing row

3
votes

I have a table constructed with ng-repeat, where each row has a checkbox set by a value in the JSON data that's being repeated:

<tr ng-repeat="t in tabledata" ng-click="t.isChecked=t.!isChecked">
    <td><input type="checkbox" ng-model="t.isChecked"></td>
    <td>{{t.firstName}} {{t.lastName}}</td>
</tr>

I would like a click on the row to toggle the checkbox value in that row. I tried the above, but it does not work. Thoughts?

1
javascriptangularjsangularjs-ng-repeathtml-tableangularjs-ng-click

1 Answers

7
votes

Try this:

ng-click="t.isChecked = !t.isChecked"

Exclamation sign should go in front of t.isChecked.

Also make sure you stop propagation of the click event on the checkbox itself, otherwise clicking on the checkbox will not allow you to check/uncheck anything.

<input type="checkbox" ng-model="t.isChecked" ng-click="$event.stopPropagation()">

Demo: http://plnkr.co/edit/KJziWDmlN2gTbthOF4yJ?p=preview