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

Question

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

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 放入第一个中。我有点困惑，因为我是 angularjs 的新手

Answer 1

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

听起来您正试图将您的应用程序分解为单独的 JS 文件。从Angular 1.x [Code] Style Guide 获得关于如何拆分应用程序的提示，我将创建一个单一的模块 setter 文件，您可以在其中定义模块并声明任何模块依赖项。

module.js

angular.module( 'app', [ ... ])

controller.js

所以你的第一个和第二个脚本是针对同一个控制器的，据我所知。您确实需要确定一个名称或另一个名称。我推荐“商店”，因为这是角度控制器的标准命名约定。像这样组合它们：

angular.module( 'app' )
.controller( 'Shops', [
    '$scope','$http','$timeout',
    function( $scope, $http, $timeout ){
        $http.get('http://localhost/moves/templates/shopping.php')
        .success(function(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.shops = [
          { shop_id: 1, shop_name: 'Shop One', checked: false },
          { shop_id: 1, shop_name: 'Shop One', checked: false },
          ...
         ]

         $scope.onItemChange = function(item) { ... }

最后，您需要确保在您的 controller.js 之前声明您的 module.js。我强烈推荐一些东西给你，因为你是 Angular 的新手：

• 开始使用 controller-as 语法
• 开始遵循该样式指南中列出的一些约定。

我这样说是因为如果您计划在某个时候迁移到 Angular 2，那么在这些约定中得到良好实践将简化迁移过程。

Answer 2

注意：您已经对您的问题进行了足够的编辑，因此我之前的回答在任何方面都无效。

使用 Angular 的原生 input[radio] implementation 可以轻松解决您的切换 UX。您只需在每个输入上同时使用 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 来为您的应用设置样式。