setting a checkbox state from a parent element via ng-click prevents the checkbox from being checked

[Aleck Landgraf]

I think I know the answer, which is to somehow prevent the click handler when clicking the actual checkbox, but that seems tough. 

This would be useful for allowing people to click a table's cell or row to select/unselect a checkbox.

http://plnkr.co/edit/pvtvOST4EYDDM1qwvWic?p=preview

Any thoughts?

Thanks,

Aleck

[Peter Bengtsson]

Could you do something like:
<td>
<label for="checkbox1" style="display:block">
<input type="checkbox" id="checkbox1" ng-model="checkbox1">
</label>
</td>

[Peter Bengtsson]

Turns out you can
http://plnkr.co/edit/pCfUjveB2vtkCCel8hPz?p=preview

You might need to play a bit with `td{padding: ...}` and stuff so that you can click anywhere in the td.

[Sander Elias]

Hi Aleck,

You are right, what happens if that if you click on the checkbox, the event bubbles into your clickhandler, and it fires too.

so basically you set, and inverse your setting in 1 click. For the user it's just like nothing happened.

it is not that comples to prevent this: http://plnkr.co/edit/mPQyRog52exn7rUdLHPH?p=preview

Regards

Sander

[Aleck Landgraf]

Thanks for all the responses. Both Peter's and Sander's solutions work great! 

I couldn't find any doc page for `$event` other than ngClick says it's available. The `$event.stopPropagation()` (I think the equivalent of jQuery's `preventDefault`) should also work for moving the `ngClick` from the `td` to the `tr`.

Thanks much,

Aleck

[Aleck Landgraf]

Peter, I don't think you need the `for` and `id`, do you? Which saves from having to generate unique ids across the app. 

http://plnkr.co/edit/3mxczjlzjvwNIPbCQ0kz?p=preview

-Aleck

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/sK7jXdA3LN8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Peter Bengtsson]

Excellent!

--

Peter Bengtsson,
home www.peterbe.com
fun wishlistgranted.com
work www.mozilla.com