Auto turn off toggle button when other one is turned on

问题

i have nested toggle buttons which are off by default, when its on it save a value to 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

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

回答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. 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).

Here's a working example, simplifying your existing code in the 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>

来源：https://stackoverflow.com/questions/38644487/auto-turn-off-toggle-button-when-other-one-is-turned-on

标签

javascript

html

angularjs

ionic-framework