在复选框列表中勾选/取消勾选所有项目时的奇怪行为

Strange behaviour when checking/unchecking all items in a list of checkboxes

本文关键字:项目 列表 复选框 取消      更新时间:2023-09-26

在复选框列表中,应该可以通过按下按钮来选中/取消选中所有项。但是下面的代码只能部分地工作:

<div ng-controller="Controller">
    <button ng-click="setCheckStateForAll(true)">All</button>
    <button ng-click="setCheckStateForAll(false)">None</button>
    <ul>
        <li ng-repeat="item in items">
            <input type="checkbox" id="{{item.name}}" ng-checked="item.isChecked"/>
            <label for="{{item.name}}">{{item.name}}</label>
        </li>
    </ul>
</div>
function Controller($scope) {
    $scope.items = [
        { name: "A", isChecked: true },
        { name: "B", isChecked: true },
        { name: "C", isChecked: true },
        { name: "D", isChecked: true },
        { name: "E", isChecked: true }
    ];
    $scope.setCheckStateForAll = function(value) {
      for (var i = 0; i < $scope.items.length; i++)
        $scope.items[i].isChecked = value;
    };
}

↗jsFiddle

默认情况下选中所有项目,如果单击"None",则所有项目按预期取消选中。

但是如果"A"被选中并且再次点击"None","A"保持选中状态(但它不应该)。但如果点击"全部",则选中所有项目。

怎么了?

ng-model绑定ìtem.isChecked代替ng-checked。ngModel提供双向绑定,而ng-checked不提供。

<input type="checkbox" id="{{item.name}}" ng-model="item.isChecked"/>

JSFIDDLE演示