Question

我正在使用ionic和angularjs处理应用程序，这就是我想要实现的，当切换开关打开时，应将localstorage设置为true，当它关闭时应该删除本地存储。

.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>

Answer 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.
         }
  };

});

Answer 2

一个好主意可能是创建自己的指令......

＆＃13;

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');
      });
      
    };
  })

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

保存到localstorage是打开并删除localstorage如果为false

2 个答案: