他のトグルボタンがオンになっているときにトグルボタンをオフにする

トグルボタンがネストされていて、デフォルトでオフになっています。 1がオンになっていると、あなたは上の他の電源を入れしようとすると、他のトグルボタンがオンになっているときにトグルボタンをオフにする

.controller('shops',['$scope','$http','$timeout',function($scope,$http,$timeout){ 
$http.get('http://localhost/moves/templates/shopping.php').success(function(data){ 
     $scope.shops=data ; 
     }); 

$scope.pushNotification = {}; 
    $scope.pushNotification.text = "Sample" 
    $scope.pushNotification.checked = false; 

    $scope.pushNotificationChange = function(item) { 
    console.log('Push Notification Change', $scope.pushNotification.checked); 
     if($scope.pushNotification.checked){ 
      localStorage.setItem("shop_id",($scope.item.shop_id)); 
     }else{ 
      localStorage.removeItem("shop_id"); 
     } 
    }; 


    //$scope.pushNotification = { checked: false }; 

}])

HTML

<div ng-controller="shops" ng-repeat="item in shops"> 
      <ion-item class="item-thumbnail-left item-text-wrap"> 
      <img src="img/index/fashion.png" alt="photo" width="32" height="32" /> 
      <h2>{{item.shop_name}} </h2> 
      <p>{{item.biz_location}}</p> 

    <input type="hidden" value="{{item.shop_id}}"> 

      <div align="right"> 
      <label class="toggle toggle-balanced"> 
      <input type="checkbox"ng-model="pushNotification.checked" 
        ng-change="pushNotificationChange()"> 
      <div class="track"><div class="handle"></div></div> 
      </label> 
      </div> 
      </ion-item> 
      </div>

出典

2016-07-28 user6579134

ここで一つだけのチェックボックスがありますか？ –

@AaronSaunders、彼らまたは2つそしてより多くのことができる – user6579134

代わりの上の他のターンしながら、私は何をしたいが、最初のものは自動的にオフにする必要がありますされますすべてのチェックボックスに1つのチェックボックスng-modelが付いている場合、各アイテムにはそれぞれ固有のアイテムに関連付けられたng-modelが必要です。そうすれば、スコープ上で単一の変更メソッドを変更してヒットするときに、各アイテムのチェックボックスモデルを必要に応じて更新することができます（この場合は、チェック状態をfalseに設定します）。

はここでOPで既存のコードを簡素化し、作業例です：

angular.module('App', []) 
 
.controller('Shops',['$scope','$http','$timeout',function($scope,$http,$timeout){ 
 

 
    $scope.shops = [ 
 
    { 
 
     shop_id: 1, 
 
     shop_name: 'Shop One', 
 
     checked: false, 
 
    }, 
 
    { 
 
     shop_id: 2, 
 
     shop_name: 'Shop Two', 
 
     checked: false, 
 
    }, 
 
    { 
 
     shop_id: 3, 
 
     shop_name: 'Shop Three', 
 
     checked: false, 
 
    } 
 
    ]; 
 

 
    $scope.onItemChange = function(item) { 
 
    // Loop over all our shops and set other checked properties to false if not our current item 
 
    angular.forEach($scope.shops, function(shop) { 
 
     if (shop !== item) { 
 
     shop.checked = false; 
 
     } 
 
    }); 
 
    // Do whatever else when an item changes 
 
    }; 
 
}]);

<body ng-app="App"> 
 
    <div ng-controller="Shops"> 
 
    <div ng-repeat="item in shops"> 
 
     <!-- Each checkbox is using a specific model for each item --> 
 
     <input type="checkbox" ng-model="item.checked" ng-change="onItemChange(item)"> 
 
     <span>{{item.shop_name}}</span> 
 
    </div> 
 
    </div> 
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
</body>

出典

2016-07-29 18:44:38 rgthree

答えに感謝し、私は何かに出席しなければならなかった遅い応答のために申し訳ありません。あなたの答えを私のスクリプトに入れる方法がわからないので、私は混乱しています。私は質問で私のスクリプトに入れることができると思っていた – user6579134

他のトグルボタンがオンになっているときにトグルボタンをオフにする

答えて

関連する問題