Question

在复选框列表中，可以通过按下按钮来检查/取消选中所有项目。但以下代码仅部分起作用：

<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

默认情况下会检查所有项目，如果单击“无”，则会按预期取消选择所有项目。

但如果选中“A”并再次点击“无”，则“A”保持检查（但不应该）。但如果单击“全部”，则会检查所有项目。

有什么问题？

Answer 1

而不是ng-checked使用ng-model绑定到ìtem.isChecked。 ngModel提供双向绑定，而ng-checked则不提供。

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

JSFIDDLE demo

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

1 个答案: