Click "Row Table" to launch the "checkbox". Click "Angularjs".
I have a simple table in an Angularjs app that contains a checkbox on 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 for the user to click any of these inside a row to activate this checkbox once?
If the user clicks on the checkbox, we don't want to trigger the click, so it looks like the button was clicked twice.
This article ( http://www.learningjquery.com/2008/12/quick-tip-click-table-row-to-trigger-a-checkbox-click/ ) describes how to do it in jQuery, but is there a way to do it using Angularjs style?
+3
source to share
1 answer
You are 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 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
+13
source to share