角度表,行中的复选框

时间:2015-09-01 21:13:13

标签: javascript angularjs events pug html-table

我的Angular项目存在问题,并没有真正看到如何解决它。 我有一个表格,每行都有一个复选框(每行代表一个"问题"项目)。我希望复选框在单击某一行或(显然)复选框时切换。 所以我写了这篇文章(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事件放在除包含复选框的单元格之外的每个单元格上,但我认为这不是一个非常好的方法。

你有什么想法吗?

1 个答案:

答案 0 :(得分:3)

You need to stop the propagation on click of checkbox to stop bubbling up the event, so that parent td wouldn't get click and the value will not get reset by adding ng-click="$event.stopPropagation()" on checkbox.

Markup

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