另一個打開時自動關閉切換按鈕

Question

我有嵌套的切換按鈕，默認情況下處於關閉狀態，當其打開時會將值保存到localstorage。 我想做的是，當一個打開並且您嘗試打開另一個時，第一個應該自動關閉，而另一個打開

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

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

另一個打開時自動關閉切換按鈕

問題描述

1 個解決方案

解決方案1
0 2016-07-29 18:44:38

另一個打開時自動關閉切換按鈕

問題描述

1 個解決方案

解決方案1 0 2016-07-29 18:44:38

解決方案1
0 2016-07-29 18:44:38