Lingbo Tang Lingbo Tang - 11 months ago 156
AngularJS Question

Ionic toggle group check one item and uncheck the others

I have created a toggle view to select available items in Ionic, and if anyone of the item were selected, I want to uncheck all the other items. I also have a scan function which allows me to dynamically update the items list

I'm fairly new to ionic, so I just have the following code in my


<ion-toggle ng-repeat="item in itemsList"
{{ item.text }}

and then I have created a simple

(function () {
'use strict';

angular.module('i18n.setting').controller('Settings', Settings);
SettingController.$inject = ['$scope'];

function Settings($scope){
$scope.settingsList = [
{text: "item1", checked: true},
{text: "item2", checked: false}

I know
will do the job of changing the attribute
for me. But what I want to know this how to use it to check one items and uncheck all the other ones?

Answer Source

loop through all the items, set the checked state of all the values to false and then your html code must be:

<ion-toggle ng-repeat="item in settingsList"
                ng-checked="item.checked" style="border:1px solid #28a54c" ng-change="toggleChange(item)">
      {{ item.text }}

Your Controller code

$scope.toggleChange = function(item) {
      if (item.checked == true) {
          for(var index = 0; index < $scope.settingsList.length; ++index)
              $scope.settingsList[index].checked = false;
          item.checked = true;
      } else {
        item.checked = false

And it's better to use forEach in async environment.