如何通過ng-checked和ng-model選擇全部

Question

我有一個Ionic應用程序（它的工作原理與Angularjs一樣），但我有一個小問題。

<ion-list class="list-inset subcategory" ng-repeat="item in shops">
      <ion-checkbox class="item item-divider item-checkbox-right" ng-model="selectAll">
        {{item}}
      </ion-checkbox>
      <ion-item ng-repeat="value in data | filter:{shopName: item}" class="item-thumbnail-left" ng-click="openProduct(value)">
...
        <div class="row">
          <ion-checkbox stop-event='click' ng-model="value.selected" ng-checked="selectAll">{{value.name}}</ion-checkbox>
        </div>
...
    </ion-list>

當我單擊帶有ng-model="selectAll"項目時，所有項目ng-model="selectAll"選中。 但是我有屬性value.selected 。 它將每個value設置為false。 當我單擊帶有ng-model="value.selected"它會更改。 但是，當我要全部選擇並單擊帶有ng-model="selectAll"此屬性不變。 請幫幫我。

注意：我在ng-repeat中有ng-repeat。 第一個ng-repeat用於商店，第二個用於產品。 我有一個按shopName的過濾器。 我想按商店選擇所有商品。 現在它可以按我的方式工作，但不會更改屬性value.selected 。 重視產品，重視產品。

Answer 1

selectAll的狀態可以從其他復選框的狀態派生，因此不應將其存儲為單獨的字段。

您可以在selectAll模型上使用getterSetter來確定應檢查的天氣。 例如

<input type="checkbox" ng-model="selectAll" ng-model-options="{getterSetter: true}"/>

JS

var getAllSelected = function () {
    var selectedItems = $scope.Items.filter(function (item) {
        return item.Selected;
    });

    return selectedItems.length === $scope.Items.length;
}

var setAllSelected = function (value) {
    angular.forEach($scope.Items, function (item) {
        item.Selected = value;
    });
}

$scope.selectAll = function (value) {
    if (value !== undefined) {
        return setAllSelected(value);
    } else {
        return getAllSelected();
    }
}

http://jsfiddle.net/2jm6x4co/

Answer 2

您可以通過ng-model="selectAll"在項目上使用ngClick 。 您可以在ng-click中調用一個函數，然后對其中ng-model="value.selected"所有其他項設置selected = true。