复选框选中 持久化与 Angular js 中的本地存储

checkbox checked persistent with local Storage in angular js

本文关键字：js 存储 Angular 持久化 复选框      更新时间：2023-09-26

我想在重新加载视图时用本地存储使"复选框持久化"不会丢失。

我在 ngStorage 的帮助下保存在本地存储中的值。

这是我的代码和演示 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({
        });

    }])
})();

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

您可能只想将选中值的映射存储 - 即控制 ID（颜色 ID）到其选中状态。所以关键是只更新地图ng-click：

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

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

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

这是更新的小提琴 https://jsfiddle.net/ciekawy/az2ehwon/

您可以像这样保存数据：

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

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

相关文章：