checkbox - how to select multiple checkboxes in ionic -


i using ionic framework app development , want 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 click on "colors", 3 three checkboxes should clicked. , when uncheck 1 of them, "colors" should unchecked , other 2 should remain.

i achieved using normal html checkboxes , javascript, little unsure on how ionic.

please help.

thanks

may use 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 above there wrong approach, because ngmodel , ngchecked work bad together. 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;             } 

Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -