如何通过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。