另一个打开时自动关闭切换按钮 [英] Auto turn off toggle button when other one is turned on
问题描述
我有嵌套的切换按钮，当将其保存到本地存储时，默认情况下这些按钮处于关闭状态.我想做的是，当一个打开并且您尝试打开另一个时，第一个应该自动关闭，而另一个打开
i have nested toggle buttons which are off by default, when its on it save 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
.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).
Instead of having one checkbox ng-model for all your checkboxes, you would want each item to have its own ng-model tied to each specific item. That way, when one changes and hits the single change method on the scope, you can update each item's checkbox model however you want (in this case, setting the checked state to false).
这是一个有效的示例，可以简化OP中的现有代码:
Here's a working example, simplifying your existing code in the 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>
这篇关于另一个打开时自动关闭切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
