how to select multiple checkboxes in ionic

Question

I am using ionic framework for my app development and want to select multiple checkboxes on click of header checkbox or button.

    <ion-list>
      <ion-checkbox ng-model="filter.color">Colors</ion-checkbox>
      <ion-checkbox ng-model="filter.blue">Red</ion-checkbox>
      <ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox>
      <ion-checkbox ng-model="filter.pink">Pink</ion-checkbox>

      <ion-checkbox ng-model="filter.number">Number</ion-checkbox>
      <ion-checkbox ng-model="filter.one">1</ion-checkbox>
      <ion-checkbox ng-model="filter.two">2</ion-checkbox>
      <ion-checkbox ng-model="filter.three">3</ion-checkbox>
    </ion-list>

When I click on "Colors", all three three checkboxes should be clicked. And when I uncheck any one of them, "Colors" should be unchecked as well and only the other two should remain.

I achieved this using normal HTML checkboxes and javascript, but a little unsure on how to do it ionic.

Please Help.

Thanks

Answer 1

May be you could use something like this:

<ion-list>
   <ion-checkbox ng-model="filter.color" ng-checked="filter.blue && filter.yellow && filter.pink">Colors</ion-checkbox>
   <ion-checkbox ng-model="filter.blue" ng-checked="filter.color">Red</ion-checkbox>
   <ion-checkbox ng-model="filter.yellow" ng-checked="filter.color">Yellow</ion-checkbox>
   <ion-checkbox ng-model="filter.pink" ng-checked="filter.color">Pink</ion-checkbox>
</ion-list>

Edit

I found that above there is wrong approach, because ngModel and ngChecked work bad together. This is working version:

<ion-list>
            <ion-checkbox ng-model="filter.color" ng-change="changeAllColors()">Colors</ion-checkbox>
            <ion-checkbox ng-model="filter.blue" ng-change="checkColors()">Red</ion-checkbox>
            <ion-checkbox ng-model="filter.yellow" ng-change="checkColors()">Yellow</ion-checkbox>
            <ion-checkbox ng-model="filter.pink" ng-change="checkColors()">Pink</ion-checkbox>
        </ion-list>

and in controller:

    $scope.changeAllColors = function () {
            $scope.filter.blue = $scope.filter.yellow = $scope.filter.pink = $scope.filter.color;
   }
        $scope.checkColors = function () {
                $scope.filter.color = $scope.filter.blue && $scope.filter.yellow && $scope.filter.pink;
            }