Ng-repeat over 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 中：

我想重复键 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

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

(function() {
    'use strict';

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

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

尝试 3

我将 $localStorage 数据存储在控制器变量中，并让 ng-repeat 迭代该变量。

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

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

尝试 3 更新

这是更新后的局部视图

<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

我将部分视图修改如下，并完全实现了我想要的。现在，键的值以新行显示。但是，它们的显示方式如下：

`[a]
 [b]
 [c]`

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

<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

Answer 2

为了让你的 angular 指令正常工作，你必须让它在作用域中可用，所以你必须在你的控制器中做这样的事情：

.controller('Ctrl', function(
    $scope,
    $localStorage
){
    $scope.localStorage = $localStorage;
});