复选框选中了 Angular js 中的本地存储持久化答案

【问题标题】：checkbox checked persistent with local Storage in angular js复选框选中了 Angular js 中的本地存储持久化
【发布时间】：2016-06-04 23:21:35
【问题描述】：

我想在我重新加载视图时使用 localStorage 使“复选框是持久的”不会丢失。

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


    }])
})();

请在我的演示中需要您的帮助！谢谢...

【问题讨论】：

标签： javascript angularjs checkbox local-storage

【解决方案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/

【讨论】：

感谢您的解释和示范。这就是我想要的，但是当我取消选中复选框值不会从视图中消失时我遇到了问题。我怎样才能做到这一点？。抱歉，我正在开始使用 javascript 和 angular
您的意思是取消选中后，即111，底部有localStorage: 1111: false？实际上这就是你应该如何使用它。如果对于此诊断视图，您想跳过未选中的项目，那么添加 ng-if="value" 和 ng-repeat 就足够了。

【解决方案2】：

你可以像这样保存数据：

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

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

【讨论】：