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"的项目时，所有项目都被选中。但我有财产value.selected。它为每个value设置错误。当我点击带有ng-model="value.selected"的项目时，它会发生变化。但是当我想要选择所有并点击ng-model="selectAll"的项目时，这个问题并没有改变。请帮帮我。

注意：我在ng-repeat中有ng-repeat。首先是ng-repeat用于商店，第二个用于产品。我有一个shopName的过滤器。我希望所有商店选择。现在它按我想要的方式工作，但不会改变属性value.selected。价值是产品，商品是商店。

Answer 1

selectAll的状态可以从其他复选框的状态派生，因此不应将其存储为单独的字段。

您可以在selectAll模型上使用getterSetter来确定应该检查的天气。 e.g。

<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

您可以使用ngClick对项目使用ng-model="selectAll"。你可以用ng-click调用一个函数，然后对ng-model="value.selected"的所有其他项调用selected = true。

如何使用ng-checked和ng-model选择所有

2 个答案: