選中/取消選中復選框列表中的所有項目時的奇怪行為

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演示