javascript - 重新加载后如何显示复选框中选中的项目的勾号？

Question

我正在尝试保存复选框中选中的项目并显示它们。我可以将它们存储在本地并显示。但是，不存储刻度。每次我重新加载页面时，都会显示存储的选中项目，但缺少勾号。关于如何将勾选项存储在选中的项目中并将其显示在复选框中的任何想法？

我当前正在尝试的jsfiddle代码是:https://jsfiddle.net/bhgmw7ey/

html代码是 '

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

'

JavaScript 代码是

(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

你的ngStorage没有正确使用，引用这个库的官方wiki https://github.com/gsklee/ngStorage .

按照入门指南，您应该通过将本地存储绑定(bind)到作用域变量来实现本地存储，以便它可以监视和更新本地存储中的变量。

对于你的情况，它应该看起来像

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


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

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

    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>

还有 JS:

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

  .controller('favCtrl',[ '$scope', '$filter', '$localStorage', function ( $scope, $filter, $localStorage) {

    $scope.chipsColores = function () {
        $scope.fav = $filter('filter')($scope.$storage.colores, {checked: true});
}
//move the 'colores' into storage
  $scope.$storage =  $localStorage.$default({
    colores : [
    {'nombre':'blue', 'codigo':'1111'},
    {'nombre':'green', 'codigo':'2222'},
    {'nombre':'red', 'codigo':'3333'}

  ]
});


}])