1

チェックボックスのリストでは、ボタンを押すことですべての項目をチェック/チェック解除できる必要があります。ただし、次のコードは部分的にしか機能しません。

<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;
    };
}

↗jsフィドル

デフォルトでは、すべてのアイテムがチェックされており、[なし] をクリックすると、期待どおりにすべてのアイテムが選択解除されます。

ただし、「A」がチェックされ、「なし」が再度クリックされた場合、「A」はチェックされたままになります (ただし、そうすべきではありません)。ただし、「すべて」をクリックすると、すべての項目がチェックされます。

何が間違っていますか?

4

1 に答える 1