2016-07-28 59 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>