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

问题描述

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

JS

  .controller（'shops'，['$范围'，'$ http'，'$ timeout'，函数（$ scope，$ http，$ timeout）{
 $ http.get（'http：//localhost/work/templates/source.php'） .success（函数（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，（ $ scoped.item.shop_id））; 
} else {
 localStorage.removeItem（shop_id）; 
} 
 
} 
}]） 
  

HTML

 < div ng-controller =shopsng-repeat =商店中的商品> 
< ion-item class =item-thumbnail-left item-text-wrap> 
< img src =img / index / fashion.pngalt =photowidth =32height =32/> 
< h2> {{item.shop_name}}< / h2> 
< p> {{item.biz_location}}< / p> 
 
< input type =hiddenvalue ={{item.shop_id}}> 
 
< div align =right> 
< label class =toggle toggle-balanced> 
< input type =checkboxng-model =active_shop.checkedng-change =active_shop（）> 
< div class =track>< div class =handle>< / div>< / div> 
< / label> 
< / div> 
< / ion-item> 
< / div> 
  

我发现很难将第二个js放到第一个js中。我有点困惑，因为我是新来的角色

解决方案

注意：您的问题就够了，我以前的答案无论如何都是无效的。

您的切换UX可以通过Angular的原生 input [radio] implementation 。您需要在每个输入中简单地使用 ngModel 和 ngValue 定义两个输入：

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

您也可以使用 ng-change 来触发 active_shop 函数：

 < input type =radio 
 ng-model =vm.selected
 ng-value ='foo'
 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屋！