通过单击封闭行来切换 Angular JS 中继器表中的复选框

【问题标题】：Toggle checkbox in Angular JS repeater table by clicking enclosing row通过单击封闭行来切换 Angular JS 中继器表中的复选框
【发布时间】：2015-02-20 17:45:09
【问题描述】：

我有一个用 ng-repeat 构建的表，其中每一行都有一个复选框，由重复的 JSON 数据中的值设置：

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

我想点击行来切换该行中的复选框值。我尝试了上述方法，但它不起作用。想法？

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat html-table angularjs-ng-click

【解决方案1】：

试试这个：

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

感叹号应该放在t.isChecked前面。

还要确保您停止在复选框本身上传播单击事件，否则单击复选框将不允许您选中/取消选中任何内容。

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

演示：http://plnkr.co/edit/KJziWDmlN2gTbthOF4yJ?p=preview

【讨论】：

事件传播还有一个问题，请检查更新的答案。
我不知道事件传播问题，我第一次看到它。谢谢。
这是因为当您单击复选框时，它会首先选中它，但之后该事件会冒泡到tr 并执行t.isChecked = !t.isChecked 代码，取消选中它。
简单、轻松、漂亮！谢谢！