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

发布时间：2020-12-17 17:05:52 所属栏目：安全来源：网络整理

导读：我在 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)" {{

我在 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样式执行此操作？

解决方法

你非常接近你只需要在$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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!