2016-08-12 8 views
0

Ionicで使用可能なアイテムを選択するためのトグルビューを作成しました。そのアイテムのいずれかが選択されている場合は、私も、私は動的に項目を更新することを可能にするスキャン機能がイオントグルグループ1つのアイテムをチェックし、他のアイテムをチェックしない

をリストアップしている私は、イオンにかなり新しいので、私はちょうど私の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を変更する作業を行います知っています。しかし、私はこれを使ってアイテムをチェックし、他のアイテムをすべてチェックしないようにする方法を知りたいですか?すべての項目を通じて

答えて

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が非同期環境にあります。

+0

私はもともとこの問題を解決するためにネストされた二重ループを使用しましたが、あなたのソリューションはよりクリーンです。 –

関連する問題