Click Table Row to Trigger a Checkbox Click in Angularjs

Question

I have a simple table in an Angularjs app that contains a checkbox in each row.

<table>
    <tr ng-repeat="obj in objList">
        <td>
            <input type="checkbox" ng-model="selectedObjs" value="{{obj}}"
                         ng-checked="obj.selected" 
                         ng-click="toggleObjSelection(obj.description)">
                {{obj.description}}
            </input>
        </td>
    </tr>
</table>

Is there a way in Angularjs to allow the user to click any where within the row to trigger the checkbox click once?

If the user clicks in the checkbox, we don't want to trigger the click so that it appears that the checkbox click was triggered twice.

This article (http://www.learningjquery.com/2008/12/quick-tip-click-table-row-to-trigger-a-checkbox-click/) describes how to do this in jQuery, but is there a way to do this using Angularjs style?

You can use delegate

ABOS
– ABOS

2014-09-17 21:21:16 +00:00
Commented Sep 17, 2014 at 21:21 — ABOS
– ABOS, Commented Sep 17, 2014 at 21:21

Community · Accepted Answer · 2017-05-23 12:34:41Z

14

You're pretty close you just need to stopPropagation on the $event object:

<table ng-controller="ctrl">
<tr ng-click="rowClicked(obj)" ng-repeat="obj in objList">
    <td>
        <input type="checkbox" ng-model="selectedObjs" value="{{obj}}"
                     ng-checked="obj.selected" 
                     ng-click="toggleObjSelection($event, obj.description)">
            {{obj.description}}
        </input>
    </td>
</tr>
</table>

And the JS:

angular.module('myApp', [])
   .controller('ctrl', function($scope) {
   $scope.objList = [{
       description: 'a'
   },{
       description: 'b'
   },{
       description: 'c'
   },{
       description: 'd'
   }];

   $scope.toggleObjSelection = function($event, description) {
        $event.stopPropagation();
       console.log('checkbox clicked');
   }

   $scope.rowClicked = function(obj) {
       console.log('row clicked');
       obj.selected = !obj.selected;
   };
});

http://jsfiddle.net/Ljwv0toh/7/

Related question: AngularJS ng-click stopPropagation

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Sep 17, 2014 at 21:54

Daniel

4235 silver badges11 bronze badges

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

2 Comments

Delvin Defoe Over a year ago

This worked perfectly, except in function $scope.rowClicked() I changed obj.selected = true; to obj.selected = !obj.selected;.

Daniel Over a year ago

Glad it worked and I approved your edit -- makes sense. Could you accept the answer?

Collectives™ on Stack Overflow

Click Table Row to Trigger a Checkbox Click in Angularjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related