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

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

1 个答案: