複選框選中持久本地存儲角js

我想使localStorage「複選框持久」，當我重新加載我的觀點不會丟失。複選框選中持久本地存儲角js

我在ngStorage的幫助下將保存在localStorage中的值保存起來。

這是我的代碼和演示https://jsfiddle.net/alx_lopz/bhgmw7ey/

<div ng-app="myApp"> 
    <div ng-controller="favCtrl"> 

     <div ng-repeat="chip in colores" > 
      <input type="checkbox" name="{{chip.codigo}}" id="{{chip.codigo}}" ng-model="chip.checked" ng-change="chipsColores()" ng-click="$storage.a = fav"> 
      <label>{{chip.codigo}}</label> 
     </div> 

     <div ng-repeat="favorite in $storage.a"> 
      localStorage: {{favorite.codigo}} 
     </div> 

    </div> 
</div>

我的控制器：

(function(){ 

    angular.module('myApp',['ngStorage']) 

    .controller('favCtrl',[ '$scope', '$filter', '$localStorage', function ($scope, $filter, $localStorage) { 
     $scope.colores = [ 
      {'nombre':'blue', 'codigo':'1111'}, 
      {'nombre':'green', 'codigo':'2222'}, 
      {'nombre':'red', 'codigo':'3333'} 

     ]; 

     $scope.chipsColores = function() { 
      $scope.fav = $filter('filter')($scope.colores, {checked: true}); 
     } 
     $scope.$storage = $localStorage.$default({ 
     }); 


    }]) 
})();

請我需要你在我的演示幫助！謝謝...

來源

2016-02-23 alexlopezgt

你想要做的可能只是將選中值的映射 - 即控制ID（顏色ID）存儲到它的選中狀態。因此，關鍵是要更新地圖上ng-click：

$storage.a[chip.codigo] = chip.checked

，然後使用ng-checked="$storage.a[chip.codigo]"。請記住，這是同樣重要的是第一初始化地圖對象：

$localStorage.$default({ 
    a: {} 
});

這裏更新小提琴https://jsfiddle.net/ciekawy/az2ehwon/

來源

2016-02-23 08:49:52 ciekawy

謝謝你的講解和演示。這就是我想要的，但是當我取消選中複選框的值不會從視圖中消失時，我遇到了問題。我怎樣才能做到這一點？。對不起，我開始的JavaScript和角 – alexlopezgt

你的意思是，取消選中後，即「111」在底部是'localStorage：1111：false'？其實這是你應該如何使用這個。如果對於這個診斷視圖，你想跳過未經檢查的項目，那麼只需將'ng-if =「value」'和'ng-repeat'一起添加即可。 – ciekawy

謝謝，我設法在你的幫助下做到這一點 – alexlopezgt

你可以只保存數據是這樣的：

$scope.$storage = $localStorage.$default({ 
    someKey1: value1, 
    someKey2: value2 
});

然後$scope.$storage對象將使用默認值創建。並保存到本地存儲如果有些值改變。您只需要將$storage對象與某些元素綁定即可。

來源

2016-02-23 08:32:02 Mavlarn

複選框選中持久本地存儲角js

回答

相關問題