javascript - Angularjs 检查范围内的所有内容

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 处理程序循环遍历所有 Angular 色，更改某些属性，例如绑定(bind)到 ngModel 指令的 checked :

$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