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]);
}());

ATTEMPT 1

这将返回数组 - $localStorage.add

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

ATTEMPT 2

我在加载模板的指令中注入了$localStorage。它仍然无法正常工作。

(function() {
    'use strict';

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

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

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

ATTEMPT 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对象保存到本地存储中

所以，为了从localstorage获取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;
});

Ng-repeat over localStorage数据

2 个答案: