Question

当我重新加载视图时，我希望使用localStorage使“checkbox is persistent”不会丢失。

我在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({
        });


    }])
})();

我的演示中需要你的帮助！感谢...

Answer 1

您要做的可能只是存储已检查值的映射 - 即控制ID（颜色ID）到其检查状态。所以关键是只需更新ng-click上的地图：

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

然后使用ng-checked="$storage.a[chip.codigo]"。请记住，首先初始化地图对象也很重要：

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

这里更新了小提琴https://jsfiddle.net/ciekawy/az2ehwon/

Answer 2

您可以像这样保存数据：

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

然后将使用默认值创建$scope.$storage对象。如果某些有价值的变化，则保存到localStorage。您只需要在视图中绑定$storage对象和一些元素。

复选框使用角度js中的本地存储检查持久性

2 个答案: