Ionic – How to do Check All with Ion-Checkbox

0

This blog represents code sample to achieve “Check all” or “Select all” using ION-Checkbox.

AngularJS/Ionic Controller Code to Check All

Say, you have a list of contacts (name) with check boxes. What you want is to achieve “check all” when you check one checkbox. $scope.allcontacts is a temporary object to capture the checkbox checked value.

$scope.allcontacts = {};
$scope.allcontacts.checked = false;
$scope.checkAll = function() {
      if ($scope.allcontacts.checked) {
        $scope.allcontacts.checked = true;
      } else {
        $scope.allcontacts.checked = false;
      }
    for (var i=0; i < $scope.contacts.length; i++) {
      $scope.contacts[i].checked = $scope.allcontacts.checked;
    };
};	

HTML Code including Ion-Checkbox to Achieve “Check All”

<ion-list>
<ion-checkbox class="item-checkbox-right" ng-model="allcontacts.checked" ng-checked="allcontacts.checked" ng-click="checkAll()">
        All Contacts
      </ion-checkbox>
      <ion-checkbox ng-repeat="contact in contacts"
                    ng-model="contact.checked"
                    ng-checked="contact.checked" class="item-checkbox-right">
        <h2>{{contact.name}}</h2>
      </ion-checkbox>
</ion-list>
Ajitesh Kumar

Ajitesh Kumar

Ajitesh is passionate about various different technologies including programming languages such as Java/JEE, Javascript, PHP, .NET, C/C++, mobile programming languages etc and, computing fundamentals such as application security, cloud computing, API, mobile apps, google glass, big data etc.Recently, he has been digging deep into the field of data science and machine learning.

Follow him on Twitter and Google+.
Ajitesh Kumar

Leave A Reply