Ionic checkbox with ng repeat with only one item selected
Posted By : Milind Ahuja | 29-Jun-2016
In Ionic checkbox is same as the input checkbox in HTML. It's just different in style and look like radio buttons. To create a ion-checkbox, you need a ionic directive "ion-checkbox".
<ion-checkbox>Checkbox Label</ion-checkbox>
In this Blog, I am going show how to use ion-checkbox which looks like radio buttons to actually work like them, i.e only one option selected at a time. Furthermore, I am going to use ion-checkbox with ng-repeat and one without ng-repeat and still make them work together i.e if you select the checkbox which is outside the ng-repeat, the selected checkbox inside the ng-repeat must get deselected and vice versa.
Sometimes there is a need that you can't use ng-repeat as there is some additional UI or any customizations with one of the checkboxes, so you take it outside the ng-repeat and customize it and others inside ng-repeat. The following images will help you to understant better:
In first image the "other" option is out of ng-repeat as the textarea will be shown when it is selected. and in the second image input fields are there in "custom" section so it is outside the ng-repeat.
HTML:
JS:
$scope.selectedTimeOption = {};
$scope.selectedTimeOption.custom = false;
$scope.items = [{
title: "1 hour",
checked: false
}, {
title: "15 min.",
checked: false
}, ];
$scope.updateSelection = function(position, items, title) {
if (position > -1) {
$scope.selectedTimeOption.custom = false;
}
angular.forEach(items, function(subscription, index) {
if (position != index) {
subscription.checked = false;
}
});
$scope.selected = title;
}
EXPLANATION:
The ng-repeat starts from index 0, so we pass a index of -1 in option that is outside the ng-repeat. So it doesn't matter how many items are there in ng-repeat but the index can never be less than 0. So if index is less than 0, custom option is selected and other options in ng-repeat deselected and vice versa.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Milind Ahuja
Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.