离子切换组检查一个项目并取消选中其他项目 [英] Ionic toggle group check one item and uncheck the others

问题描述

我创建了一个切换视图来选择Ionic中的可用项目，如果选择了任何项目，我想取消选中所有其他项目。我还有一个扫描功能，允许我动态更新项目列表

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

我对离子很新，所以我在<$ c中只有以下代码$ c> settings.html

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

<ion-toggle ng-repeat="item in itemsList"
         ng-model="item.checked">
    {{ item.text }}
</ion-toggle>

然后我创建了一个简单的 settings.js ：

and then I have created a simple settings.js:

(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}
        ];
    }
})();

我知道 ng-model =item.checked将为我完成更改属性 $ scope.settingsList.checked 的工作。但我想知道如何使用它来检查一个项目并取消选中所有其他项目？

I know ng-model="item.checked" will do the job of changing the attribute $scope.settingsList.checked for me. But what I want to know this how to use it to check one items and uncheck all the other ones?

推荐答案

循环所有项目，将所有值的选中状态设置为false，然后你的html代码必须是：

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-model="item.checked" 
                ng-checked="item.checked" style="border:1px solid #28a54c" ng-change="toggleChange(item)">
      {{ item.text }}
</ion-toggle>

您的控制器代码

$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
      }
};

最好在异步中使用 forEach 环境。

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

这篇关于离子切换组检查一个项目并取消选中其他项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！