Auto turn off toggle button when other one is turn

2019-09-08 18:17发布

站内问答 / JavaScript
1816 1 5

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条回答
祖国的老花朵
2楼-- · 2019-09-08 18:50

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)