javascript - 本地存储出现奇怪的 ng-repeat 行为

Question

我只是在玩 ionic 存储和本地存储。我正在搞乱 ionic 示例应用程序来对其进行一些自定义，但我遇到了障碍。基本上主页列出了项目。用户进入该项目后，他们可以将其添加到任务列表中。

要在主页上创建项目，用户打开一个模式并输入信息(标题、日期等)，然后将项目存储在本地存储中。项目数组有一个任务列表的嵌套数组。

一旦用户进入某个项目，他们就可以打开一个添加任务的模式。提交后，任务将被推送到嵌套数组，该数组运行良好并输出:

但是，当用户返回到列出所有项目的主页时，只会出现一些重复的空对象(在本地存储中查找该对象是完美的)。

我的列表 Controller 和内部列表 Controller :

.controller('ProfileCtrl', function ($filter, $scope, $stateParams, $timeout, $ionicModal, Eventers) {


    var createEventer = function(eventerId, eventerTitle, eventerVenue, eventerDay, eventerMonth, eventerYear, eventerDate) {
        var newEventer = Eventers.newEventer(eventerId,eventerTitle, eventerVenue, eventerDay, eventerMonth, eventerYear, eventerDate);
        $scope.eventers.push(newEventer);
        Eventers.save($scope.eventers);
        }
        $scope.eventers = Eventers.all();

    $ionicModal.fromTemplateUrl('new-event.html', function(modal) {
        $scope.eventerModal = modal;
    }, 
    {
        focusFirstInput: false,
        scope: $scope
    });

    ////////////////////////////////

    $scope.date = new Date();
    console.log($scope.date);

    ////////////////////////////////

    $scope.createEventer = function(eventer, index) {
        var eventerId = localStorage.clickcount;
        var eventerTitle = eventer.title;
        var eventerVenue = eventer.venue;
        var eventerDay = eventer.day;
        var eventerMonth = eventer.month;
        var eventerYear = eventer.year;
        var eventerDate =  $scope.date;
       if (eventerId,eventerTitle, eventerVenue, eventerDay, eventerMonth, eventerYear, eventerDate) {
            createEventer(eventerId,eventerTitle, eventerVenue, eventerDay, eventerMonth, eventerYear, eventerDate);
            $scope.eventerModal.hide();
            eventer.title = "";
            eventer.venue = "";
            eventer.day = "";
            eventer.month = "";
            eventer.year = "";

        }


        console.log(eventer);
    };


})

和我的内在 Controller :

.controller('ProfileInnerCtrl', function ($scope, $stateParams,$ionicModal, $timeout, Eventers) {
 $scope.eventer = Eventers.get($stateParams.eventerId);

    $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
        $scope.eventerModal = modal;
    }, 
    {
        focusFirstInput: false,
        scope: $scope
    });

 $scope.createTask = function(task) {

        $scope.eventer.tasks.push({
            title: task.title
        });

        console.log(task.title);
        Eventers.save($scope.eventer);
        task.title = "";
        $scope.eventerModal.hide();

    };

    $scope.newTask = function() {
        $scope.eventerModal.show();
    };

    $scope.closeNewTask = function() {
        $scope.eventerModal.hide();
    }
     $scope.completionChanged = function() {
        Eventers.save($scope.eventers);
    };
})

--------编辑:添加工厂--------

.factory('Eventers', function() {

            /**/


    return {
        all: function() {
          var eventerString = window.localStorage['eventers'];
          if (eventerString) {
            return angular.fromJson(eventerString);
          }
          return [];
        },
        save: function(eventers) {
          window.localStorage['eventers'] = angular.toJson(eventers);
        },
        newEventer: function(eventerId, eventerTitle,eventerVenue , eventerDay, eventerMonth, eventerYear, eventerDate) {
            return {
                id: eventerId,
                title: eventerTitle,
                venue: eventerVenue,
                day: eventerDay,
                month: eventerMonth,
                year: eventerYear,
                date: eventerDate,
                tasks: []
            };
        },
        get: function(eventerId){
          var hell = window.localStorage['eventers'];
          var eventers = JSON.parse(hell);

            for (var i = 0; i < eventers.length; i++) {


              if (parseInt(eventers[i].id) === parseInt(eventerId)){
                    console.log(eventerId);
                    return eventers[i];
                }
            }

            return null;
        }


    }

});

添加的图像:前 2 个显示添加任务之前的主页和本地存储。最后2张显示添加任务后的本地存储和主页

Answer 1

好吧，当你创建一个新任务时，你将 $scope.eventer 保存在 localStorage 中，其中只有标题。

为什么不将整个任务对象推送到 $scope.eventer 中？

$scope.createTask = function(task) {

    $scope.eventer.tasks.push(task);
...

编辑:

添加任务后 localStorage 中的事件器不是数组，因此 ng-repeat 会获取对象中的每个键。

尝试Eventers.save([$scope.eventer]);用于测试，但是您必须重新考虑整个过程，当数组中有多个对象时怎么办？这样你就会失去旧的