当另一个打开时自动关闭切换按钮
问题描述:
我有嵌套的切换按钮,默认情况下它是关闭的,当它将值保存到localstorage时。当一个人打开了我想做的事就是和你试图打开其他上,第一个应该被自动关闭,而在当另一个打开时自动关闭切换按钮
.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>
答
代替您的复选框有一个复选框ng-model
,您希望每个项目都有自己的ng-model
与每个特定项目绑定。这样,当一个人改变并击中范围上的单个更改方法时,您可以根据需要更新每个项目的复选框模型(在这种情况下,将选中状态设置为false)。
这里的工作的例子,在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
感谢您的答案,并对我迟到的答复感到抱歉,我不得不关注一些事情。我很困惑,因为我不知道如何把你的答案放到我的脚本中。我在想,如果你可以把它写入我的脚本的问题 – user6579134
只有一个复选框吗? –
@AaronSaunders,他们或两个,可以更多 – user6579134