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?

Solution

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

Comments

[dfsq]

There is another problem with event propagation, check updated answer.

[Steve]

I wasn't aware of the event propagation issue, first time I've seen it. Thanks.

[dfsq]

This is because when you click checkbox it will first check it, but after that event will bubble up to the tr and execute t.isChecked = !t.isChecked code, unchecking it.

[Vippy]

Simple, easy, beautiful! Thank you!