另一个打开时自动关闭切换按钮

Question

i have nested toggle buttons which are off by default, when its on it save a value to localstorage. 我有嵌套的切换按钮，默认情况下处于关闭状态，当其打开时会将值保存到localstorage。 What i want to do is when one is turned on and you try to turn the other on, the first one should be turned off automatically while the other turns on 我想做的是，当一个打开并且您尝试打开另一个时，第一个应该自动关闭，而另一个打开

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

Instead of having one checkbox ng-model for all your checkboxes, you would want each item to have its own ng-model tied to each specific item. 您不希望所有复选框都具有一个复选框ng-model ，而是希望每个项目都将自己的ng-model绑定到每个特定项目。 That way, when one changes and hits the single change method on the scope, you can update each item's checkbox model however you want (in this case, setting the checked state to false). 这样，当一个更改并击中示波器上的单个更改方法时，您可以根据需要更新每个项目的复选框模型（在这种情况下，将选中状态设置为false）。

Here's a working example, simplifying your existing code in the OP: 这是一个工作示例，可以简化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