2016-07-28 60 views
0

我正在使用离子和angularjs的应用程序,这是我想实现的,当切换开关是它应该设置localstorage为true,当它已关闭,应删除本地存储。保存到localstorage切换和删除localstorage如果它的假

.controller('shops',['$scope','$http','$timeout',function($scope,$http,$timeout) { 
    $http.get('http://localhost/work/templates/source.php').success(function(data){ 
     $scope.shops=data; 
    }); 

    $scope.pushNotificationChange = function(item) { 
     $timeout(function() { 
      if ($scope.pushNotification = { checked: true }) { 
       alert("false"); 
      } 
      //alert('Push Notification Change: '+ $scope.pushNotification.checked); 

      localStorage.setItem("shop_id",($scope.item.shop_id)); 
     }, 0); 
    }; 
}]); 

HTML

<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> 
+1

,什么是错误?你期望的行为是什么? – CozyAzure

+1

为什么使用'if($ scope.pushNotification = {checked:true})'而不是'if($ scope.pushNotification.checked)'? – Lex

回答

1

编辑:随着越来越多的明确的答案

<html ng-app="ionicApp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Toggles</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 

    <ion-header-bar class="bar-positive"> 
     <h1 class="title">Toggles</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-toggle ng-model="pushNotification.checked" 
        ng-checked="pushNotification.checked"> 
      {{ pushNotification.text }} 
     </ion-toggle> 
     <div class=""> 
      {{pushNotification.checked}} 
     </div> 
    </ion-content> 
    </body> 
</html> 

你的js代码将

angular.module('ionicApp', ['ionic']) 

.controller('MainCtrl', function($scope) { 

    $scope.pushNotification = {}; 
    $scope.pushNotification.text = "Sample" 
    $scope.pushNotification.checked = false; 

    $scope.pushNotificationChange = function() { 
    console.log('Push Notification Change', $scope.pushNotification.checked); 
     if($scope.pushNotification.checked){ 
      //set your local storage 
     }else{ 
      //remove from local storage. 
     } 
    }; 

}); 
+0

为什么使用'if($ scope.pushNotification.checked =='true')'?为什么不'if($ scope.pushNotification.checked)'? – Lex

+0

是的,那可以。 – Naveen

+0

我得到这个错误:TypeError:无法读取属性'检查'未定义 – user6579134

0

一个好主意,可以创建自己的指令...

angular 
 
    .module("switch", []) 
 
    .directive("switch", function SwitchDirective() {  
 
    
 
    return function switchPostLink(iScope, iElement, iAttributes) { 
 
     var lsKey = "FOO"; 
 
     
 
     iElement.addClass("switch"); 
 
     
 
     iScope.read = function() { 
 
     var res = localStorage.getItem(lsKey) || false; 
 
     
 
     if(res) { 
 
      res = JSON.parse(res).active; 
 
     } 
 
     
 
     return res; 
 
     }; 
 
     iScope.set = function() { 
 
     localStorage.setItem(
 
      lsKey, 
 
      JSON.stringify({ active: true }) 
 
     ); 
 
     
 
     iElement.addClass("is-active");    
 
     iScope.isActive = true; 
 
     } 
 
     
 
     iScope.unset = function() { 
 
     localStorage.clearItem(lsKey); 
 
     
 
     iElement.removeClass("is-active"); 
 
     iScope.isActive = false; 
 
     } 
 
     
 
     if(iScope.read()) { 
 
     isScope.set() 
 
     } else { 
 
     iScope.unset(); 
 
     } 
 

 
     iElement.bind('click', function() { 
 
     if(iScope.isActive) { 
 
      return iScope.unset(); 
 
     } 
 
     
 
     return iScope.set(); 
 
     }); 
 
     
 
     iScope.$on("destroy", function() { 
 
     iElement.unbind('click'); 
 
     }); 
 
     
 
    }; 
 
    })
.switch { 
 
    cursor: pointer; 
 
    width: 100px; 
 
    line-height: 2; 
 
    border: 1px solid red; 
 
    margin: 5x 10px; 
 
    text-align: center; 
 
    
 
    background-color: #999; 
 
} 
 
switch.is-active { 
 
    background-color: green; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<section ng-app="switch"> 
 
    <div switch> 
 
    CLICK 
 
    </div> 
 
</section>