Question

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

我对离子很新，所以我在settings.html

中只有以下代码

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

然后我创建了一个简单的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。但我想知道如何使用它来检查一个项目并取消选中所有其他项目？

Answer 1

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

<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。

Answer 2

Angular 2+版本，Ionic 4

HTML

<div class="toogle" *ngFor="let item of toogleConfig">
  <div class="toogle__title">{{item.title}}</div>
    <ion-toggle [(ngModel)]="item.checked" (ngModelChange)="ToogleChange(item.id)" color="success"></ion-toggle>
  </div> 
</div>

TS

public toogleConfig = [
    {id:0, title:'Recurrent', checked: false},
    {id:1, title:'One time', checked: false},
  ]

public ToogleChange(index:number) {        
    this.toogleConfig.forEach(toogle => { toogle.checked = false; });
    this.toogleConfig[index].checked = true;
  }

离子切换组检查一个项目并取消选中其他项目

2 个答案: