Toggle checkbox in Angular JS repeater table by clicking enclosing row

Question

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?

Answer 1

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