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>
Latest posts by Ajitesh Kumar (see all)
- Agentic Reasoning Design Patterns in AI: Examples - October 18, 2024
- LLMs for Adaptive Learning & Personalized Education - October 8, 2024
- Sparse Mixture of Experts (MoE) Models: Examples - October 6, 2024
I found it very helpful. However the differences are not too understandable for me