单击表行以触发复选框单击Angularjs

Question

我在Angularjs应用程序中有一个简单的表,每个行都包含一个复选框.

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

Angularjs中是否有一种方法允许用户单击行中的任何位置以触发复选框单击一次？

如果用户单击复选框,我们不希望触发单击,以便显示复选框单击被触发两次.

这篇文章(http://www.learningjquery.com/2008/12/quick-tip-click-table-row-to-trigger-a-checkbox-click/)描述了如何在jQuery中执行此操作,但是有没有使用Angularjs风格的方法吗？

Answer 1

你非常接近你只需要在$ event对象上停止传播:

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

和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/

相关问题:AngularJS ng-click stopPropagation