Question

有嵌套的切换按钮，默认情况下是关闭的，当用户打开一个按钮时，会将值保存到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 = 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>

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

Answer 1

注意：您已经对我的问题进行了足够的编辑，以致我之前的答案无论如何都无效。

您可以使用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 example

另一种选择是利用ui.bootstrap's radio button implementation（如果您确实使用Bootstrap来设置应用程序的样式。

如果当前打开，则自动切换关闭

1 个答案: