Angular tr-ngClick event triggerd by nested checkbox

Question

I have a table where each row has a checkbox. The table-row listen to ng-click and the checkbox to ng-change:

<tr ng-repeat="box in boxList | box_expect:searchText" ng-click="openBox(box._id)">
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td><input type="checkbox" ng-change="checkBoxChanged(id)" ...></td>
</tr>

Everytime I click the checkbox, I trigger the ng-click event of the table row.

I changed ng-click to ng-doubleClick, but double-clicks on mobile devices are not comfortable to handle.

How can I fix this?

I just want to keep my one-click event. I just want to konw, how can i prevent, that the check-box change event triggers the row ng-click event. — marcel
– marcel, Commented Apr 2, 2014 at 9:20

Marcel Gwerder · Accepted Answer · 2014-04-02 09:42:05Z

3

You can create a directive which stops propagation of the click event on your checkbox (DEMO).

app.directive('noclick', [function() {
    return {
      restrict: 'A',
      link: function link(scope, element, attrs) {
        element.bind('click', function(e) {
            e.stopPropagation();
        });
      }
    }
}]);

And add it to your checkbox:

<input type="checkbox" ng-change="checkBoxChanged(id)" ng-model="loremIpsum" noclick>

answered Apr 2, 2014 at 9:42

Marcel Gwerder

8,5406 gold badges40 silver badges63 bronze badges

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

2 Comments

marcel Over a year ago

That looks great, I'll implement this and check if it works for me :)

marcel Over a year ago

Yes that's it. I would never have thought of a directive for that. Tyvm ;)

Collectives™ on Stack Overflow

Angular tr-ngClick event triggerd by nested checkbox

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