Angular table, checkbox in row

Question

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 ?

Why use a checkbox at all if the whole row can be selected? Maybe instead of an input you should show a checkmark there based on the value of question.selected. — Matthew Green
– Matthew Green, Commented Sep 1, 2015 at 21:21
on click toggling happens automatically..no need to do it again on ng-click — Pankaj Parkar
– Pankaj Parkar, Commented Sep 1, 2015 at 21:21
@PankajParkar It happens when clicking on the checkbox yes, but I want it to happen when clicking anywhere on the line. It's easier than needing to click precisely on the checkbox — Benjamin Bini
– Benjamin Bini, Commented Sep 1, 2015 at 22:03
@BenjaminBini you could to the way I suggested in my answer.. — Pankaj Parkar
– Pankaj Parkar, Commented Sep 1, 2015 at 22:21

Pankaj Parkar · Accepted Answer · 2015-09-01 22:20:50Z

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

answered Sep 1, 2015 at 22:20

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Benjamin Bini Over a year ago

Awesome, it's exactly what I was looking for. Thanks ! #TIL

Pankaj Parkar Over a year ago

@BenjaminBini Glad to help you. Thanks :)

Collectives™ on Stack Overflow

Angular table, checkbox in row

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related