问题描述:

I have an Ionic application(it work the same like Angularjs) and I have a little problem.

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

When I click on item with ng-model="selectAll" all items is selected. But I have property value.selected. It sets false for each one value. When I click on item with ng-model="value.selected" it changes. But when I want selec all and click on item with ng-model="selectAll" this propety doesn't change.

Help me please.

Note: I have ng-repeat in the ng-repeat. First ng-repeat is for shops, the second is for products. And I have a filter by shopName. And I want select all by shops. Now it works how I want, but doesn't change property value.selected. Value it is produt, item it is shop.

网友答案:

the state of selectAll can be derived from the state of your other check boxes so it should not be stored as a seperate field.

You could use a getterSetter on the selectAll model to determine weather it should be checked. 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/

网友答案:

you can use ngClick on the item with ng-model="selectAll". you can call a function in ng-click and then make selected=true for all other items where ng-model="value.selected".

相关阅读:
Top