推送到数组不会通过ng-repeat指令更新视图列表

时间:2016-01-11 05:40:26

标签: javascript arrays angularjs angular-ui-router angularjs-ng-repeat

我在ng-repeat

中实施了一个简单的index.html指令
<div ng-repeat="item in itemCollection">
    {{item.name}}
    {{item.date}}
    ...
</div>

我尝试使用push()方法在数组中添加新项目。

$scope.itemCollection = [];

$scope.someFunction = function(){
    var o = {};
    //do stuff here.
    o.name = name-fromDoingStuff;
    o.date = date-fromDoingStuff;
    ...

    $scope.itemCollection.push(o);
}

itemCollection会更新。我使用alert()

确认了这一点
alert($scope.itemCollection[0].name); 
alert($scope.itemCollection[0].date); 
... 
alert($scope.itemCollection[1].name); 
alert($scope.itemCollection[1].date); 
...

但是视图中显示的列表不会更新。我已经尝试使用$scope.$apply,但它仍然是相同的。我能做错什么?

已加入已添加其他信息:

div位于ng-controller

<body ng-app = "grabbingSystem" ng-controller = "mainCtrl">
    <div class = "center-wrap">
        <ui-view></ui-view> //I'm using angular-ui-router
    </div>
</body>

div不是嵌套ng-repeat

的一部分

已编辑已添加其他信息:

配置中的所有页面都分配给同一个控制器。

.config([
        '$stateProvider',
        '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider){

            $stateProvider
                .state('list', {
                    url: '/list',
                    templateUrl: 'tickets/_ticketsList.html',
                    controller: 'mainCtrl',
                    resolve: {
                      postPromise: ['tickets', function(tickets){  
                        return tickets.DBgetAll();
                      }]
                    }
                })
                .state('grab', {
                    url: '/grab',
                    templateUrl: 'tickets/_ticketsGrab.html',
                    controller: 'mainCtrl'
                })

            $urlRouterProvider.otherwise('list');
        }

    ])

1 个答案:

答案 0 :(得分:0)

我尝试了你的代码它工作得很好只是一些小的改动。

http://jsbin.com/qirafa/1/edit?html,js,output

<强> HTML

<body ng-app="myApp" ng-controller="MainController">
<div ng-repeat="item in itemCollection">
  {{item.name}}
  {{item.date}}
</div>
</body>

<强> Javscript

var myApp = angular.module('myApp', []);

myApp.controller("MainController", function($scope) {
$scope.itemCollection = [];

$scope.someFunction = function(){
    var o = {};

    o.name = "a";
    o.date = "b";

    $scope.itemCollection.push(o);
};

$scope.someFunction();

});

检查你的ng-repeat应该在适当的控制器内。

你应该调用将项添加到数组的函数。