CODEWITHSUNDEEP
javascriptangularjseventspughtml-table
Benjamin Bini
Benjamin Bini

Reputation: 311

Angular table, checkbox in row

I have an issue with my Angular project and don't really see how to solve it. I have a table with checkboxes on each row (each row representing a "question" item). I want the checkbox to toggle when clicking on a row or (obviously) on the checkbox. So I wrote this (Jade) :

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

Problem is : when I click on the checkbox, the ng-click event on the row is triggered and then the checkbox remains unchecked. A workaround would be to put the ng-click event on each cell except the one containing the checkbox but I think it is not really a pretty way to do it.

Do you have any idea ?

Upvotes: 1

Views: 2380

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

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

Upvotes: 3

Related Questions