Angular table，行中的复选框

Question

我的 Angular 项目有问题，不知道如何解决。我有一个 table，每行都有复选框（每行代表一个 "question" 项）。我希望在单击一行或（显然）复选框时切换复选框。所以我写了这个 (Jade) :

tr(ng-click="question.selected = !question.selected")
    td
        input(type="checkbox", ng-model="question.selected")
    td {{question.title}}
    td {{question.answers}}
    td etc...

问题是：当我点击复选框时，该行的 ng-click 事件被触发，然后复选框保持未选中状态。一种解决方法是将 ng-click 事件放在除包含复选框的单元格之外的每个单元格上，但我认为这并不是一个很好的方法。

你有什么想法吗？

Answer 1

您需要在点击 checkbox 时停止传播以停止冒泡事件，这样父 td 就不会获得点击并且不会通过添加 ng-click="$event.stopPropagation()" 来重置值复选框。

标记

tr(ng-click="question.selected = !question.selected")
    td
        input(type="checkbox", ng-model="question.selected", ng-click="$event.stopPropagation()")
    td {{question.title}}
    td {{question.answers}}
    td etc...

Angular table，行中的复选框

Angular table, checkbox in row

javascript

events

html-table

angularjs

pug