2

这是我的部分观点

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

2 回答 2

1

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

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

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

然后你可以迭代它。

阅读有关本地存储的更多信息

于 2015-08-31T17:01:18.660 回答
0

为了使您的角度指令起作用，您必须使其可用于范围，因此您必须在控制器中执行以下操作：

.controller('Ctrl', function(
    $scope,
    $localStorage
){
    $scope.localStorage = $localStorage;
});
于 2015-08-31T17:08:38.730 回答