如果当前处于开启状态，则自动切换关闭 [英] auto switch toggle off if one is currently on

问题描述

有嵌套的切换按钮，默认情况下是关闭的，当用户打开一个按钮时，它会将一个值保存到 localstorage.我想要做的是当一个打开并且您尝试打开另一个时，第一个应该自动关闭，而另一个打开.

JS

.controller('shops',['$scope','$http','$timeout',function($scope,$http,$timeout){$http.get('http://localhost/work/templates/source.php').success(function(data){$scope.shops=data ;});$scope.active_shop = {};$scope.active_shop.checked = false;$scope.active_shop = 功能(项目){如果($scope.active_shop.checked){localStorage.setItem("shop_id",($scope.item.shop_id));}别的{localStorage.removeItem("shop_id");}}}])

HTML

 
<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="active_shop.checked" ng-change="active_shop()"><div class="track"><div class="handle"></div></div>
</ion-item>

我发现很难将第二个 js 放入第一个中.我有点困惑，因为我是 angularjs 的新手

解决方案

注意:您已经对问题进行了足够的编辑，以至于我之前的回答在任何情况下都无效.

您的切换用户体验可以通过 Angular 的原生 input 轻松解决[无线电]实施.您只需在每个输入上使用 ngModel 和 ngValue 定义两个输入:

<输入类型=收音机"ng-model="vm.selected"ng-value="'bar'"/>

你也可以使用ng-change来触发active_shop函数:

codepen 示例

另一种选择是利用 ui.bootstrap 的单选按钮实现(如果您确实在使用 Bootstrap 来设计您的应用.

there are nested toggle buttons which are off by default, when user turns one on it saves 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.

JS

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

        });

 $scope.active_shop = {};
  $scope.active_shop.checked = false;
  $scope.active_shop = function(item) {
        if($scope.active_shop.checked){
            localStorage.setItem("shop_id",($scope.item.shop_id));
        }else{
             localStorage.removeItem("shop_id");
         }

  }
}])

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="active_shop.checked" ng-change="active_shop()">
          <div class="track"><div class="handle"></div></div> 
          </label>
          </div>
          </ion-item>
          </div>

I'm finding it hard to put the second js into the first one. I'm kinda confused since i'm new to angularjs

解决方案

note: You've edited your question enough that my prior answer isn't valid in any way.

Your toggle UX can easily be addressed with Angular's native input[radio] implementation. You need to simply define two inputs using both ngModel and ngValue on each input:

<input type="radio" 
       ng-model="vm.selected" 
       ng-value="'foo'"/>

<input type="radio" 
       ng-model="vm.selected" 
       ng-value="'bar'"/>

You can also use ng-change to trigger the active_shop function:

<input type="radio" 
       ng-model="vm.selected" 
       ng-value="'foo'" 
       ng-change="active_shop();"/>

codepen example

The other option is to utilize ui.bootstrap's radio button implementation (if you're indeed using Bootstrap to style your app.

这篇关于如果当前处于开启状态，则自动切换关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！