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>