Question

我希望在循环循环中检查所有复选框。但是如何？

<section ng-repeat="user in users">

    <p>{{ user.name }}</p>

    <label for="#">
        <input type="checkbox" ng-click="checkAllRoles(user)"> CHECK ALL
    </label>

    <ul>
        <li ng-repeat="role in user.roles">
            <input type="checkbox" value="{{ role.id }}"> {{ role.name }}
        </li>
    </ul>

</section>

Answer 1

您可以做的是使用ngChange处理程序循环遍历所有角色，更改绑定到checked指令的ngModel等属性：

$scope.checkAllRoles = function(user) {
    user.roles.forEach(function(role) {
        role.checked = user.allChecked;
    });
};

HTML就是这样：

<section ng-repeat="user in users">

    <p>{{ user.name }}</p>

    <label for="#">
        <input type="checkbox" ng-model="user.allChecked" ng-change="checkAllRoles(user)"> CHECK ALL
    </label>

    <ul>
        <li ng-repeat="role in user.roles">
            <input type="checkbox" value="{{ role.id }}" ng-model="role.checked">{{ role.name }}
        </li>
    </ul>

</section>

演示： http://plnkr.co/edit/a3I4DKyz6DRUKTIt50Xj?p=preview

Answer 2

只需将已选中添加到输入的末尾即可。

<ul>
   <li ng-repeat="role in user.roles">
     <input type="checkbox" value="{{ role.id }}" checked> {{ role.name }}
   </li>
</ul>

Angularjs检查范围的所有范围

2 个答案: