How to select all with ng-checked and ng-model

Question

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.

Answer 1

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

<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

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