javascript - Ng-repeat localStorage 数据

Question

这是我的部分观点

<table class="table table-hover" ng-controller="emailViewController">
    <tbody>
    <tr >
        <td><input type="checkbox" ng-checked="checkAllEmail" ng-model="selectedEmail"/>
            <a href="#">
                <span class="glyphicon glyphicon-star-empty"></span>
            </a></td>
        <td><label ng-bind="add"></label></td>
        <td><label ng-bind="subject"></label></td>
        <td><label ng-bind="emailContent" ></label></td>
    </tr>
    </tbody>
</table>

我将这些数据存储在 localStorage 中:

我想 ng-repeat 键的值 ngStorage-add和 ngStorage-subject .我尝试了以下方法:

1) <td><label ng-bind="add" ng-repeat="item in localStorage.getItem('ngStorage-add')"></label></td> .

2) ng-repeat="item in localStorage.getItem('ngStorage-add') track by value"

然而，它并没有起作用。有没有人知道如何实现这一点？

编辑

emailViewController :

(function() {
    'use strict';
    var emailViewController = function (fetchDataService, $scope,$filter,$timeout, $localStorage) {

        $scope.to = [];

        var url = 'app/mock/emails.json';
        fetchDataService.getContent(url)
            .then(function(response){
                $scope.emails = response.data;
                $scope.loadEmails('Primary');

                angular.forEach($scope.emails, function(key) {
                   $scope.to.push(key.to);
                });
            });

          $scope.information = {
              add: [],
              subject: [],
              emailContent: []
            };

          $scope.typeaheadOpts = {
              minLength: 1
            };

           $scope.$on("decipher.tags.added", function(info, obj) {
              $timeout(function(){
                tagAdded(info, obj);
              });
            });

            function tagAdded(info, obj) {
              for (var i = 0; i < $scope.to.length; i++) {
                if ($scope.to[i] === obj.tag.name) {
                  $scope.to.splice(i, 1);
                } 
              }
            }

             $scope.close = function(){
                //console.log("hide");
                $('.modal').modal('hide');

            };

         $scope.loadEmails = function(searchCriteria){
             $scope.filteredEmails =  $filter('filterByCategory')
                                            ($scope.emails,searchCriteria);
         };

         $scope.submit = function (add, subject, emailContent) {

          if (! ($localStorage.add instanceof Array) ) {
                $localStorage.add = [];
            }

            $localStorage.add.push(add);

            if (! ($localStorage.subject instanceof Array) ) {
                $localStorage.subject = [];
            }

            $localStorage.subject.push(subject);

            if (! ($localStorage.emailContent instanceof Array) ) {
                $localStorage.emailContent = [];
            }

            $localStorage.emailContent.push(emailContent);
            //$scope.update();
         };


            $scope.clear = function() {
                 $scope.information.add = [];
                 $scope.information.subject = '';
                 $scope.information.emailContent = '';
                 }            

        $scope.$on('loadEmail',function(event,data){
          $scope.loadEmails(data);
        });
    };
    angular.module('iisEmail')
        .controller ('emailViewController',
        ['fetchDataService', '$scope','$filter', '$timeout', '$localStorage', emailViewController]);
}());

尝试 1

这是返回数组 - $localStorage.add

这将返回数组的第一个元素(在本例中为 a)- $localStorage.add[0][0]

尝试 2

我注入(inject)了$localStorage在加载模板的指令中。它仍然不起作用。

(function() {
    'use strict';

    var drafts = function ($localStorage) {
        return {
            templateUrl : "app/partials/draftsView.html"
        };
    };

    angular.module('iisEmail').directive("drafts", ['$localStorage', drafts]);
}());

尝试 3

我存储了 $localStorage Controller 变量中的数据，并让 ng-repeat 迭代该变量。

<td><label ng-repeat="item in addition track by $index">
                {{item}}
        </label></td>

这样做会产生一个结果，但整个数组出现在一行中。我要a显示在一行中，b显示在下一行。

尝试 3 更新

这是更新后的局部 View

<table class="table table-hover" ng-controller="emailViewController">
    <tbody>
    <tr >
        <td><input type="checkbox" ng-checked="checkAllEmail" ng-model="selectedEmail"/>
            <a href="#">
                <span class="glyphicon glyphicon-star-empty"></span>
            </a></td>
        <td><label ng-repeat="item in addition track by $index">
                {{item}} 
        </label></td>
        <td><label ng-bind="subject"></label></td>
        <td><label ng-bind="emailContent" ></label></td>
    </tr>
    </tbody>
</table>

尝试 4

我修改了部分 View 如下，并实现了我正在寻找的东西。现在，键的值显示在新行中。然而，它们是这样显示的:

`[a]
 [b]
 [c]`

我不想显示数组符号。这是修改后的局部 View 。

<table class="table table-hover" ng-controller="emailViewController">
    <tbody>
    <tr ng-repeat = "(key, value) in addition" >
        <td><input type="checkbox" ng-checked="checkAllEmail" ng-model="selectedEmail"/>
            <a href="#">
                <span class="glyphicon glyphicon-star-empty"></span>
            </a></td>
        <td>  {{ value }} </td>
        <td><label ng-bind="subject"></label></td>
        <td><label ng-bind="emailContent" ></label></td>
    </tr>
    </tbody>
</table>

解决方案

<table class="table table-hover" ng-controller="emailViewController">
    <tbody>
    <tr ng-repeat = "(key, value) in localStorage.add" >
        <td><input type="checkbox" ng-checked="checkAllEmail" ng-model="selectedEmail"/>
            <a href="#">
                <span class="glyphicon glyphicon-star-empty"></span>
            </a></td>
        <td ng-repeat = "value in value">  {{value }} </td>
        <td><label ng-bind="subject"></label></td>
        <td><label ng-bind="emailContent" ></label></td>
    </tr>
    </tbody>
</table>

Answer 1

LocalStorage 只能存储字符串值，我相信您通过使用 JSON.stringify() 序列化将 JSON 对象保存到本地存储中

因此，为了从本地存储中获取 JSON 对象，您可以使用如下所示的 JSON.parse() 函数，

var add = JSON.parse(localStorage.getItem('ngstorage-add'))
var subject = JSON.parse(localStorage.getItem('ngstorage-subject'))

然后您可以对其进行迭代。

阅读更多关于 LocalStorage 的信息