2016-05-31 34 views
0

名为NG-重复列表源太多次

angular.module('NGTest', [ 
 
]) 
 
.controller('ItemList', ['$scope', function($scope) { 
 
\t console.log("ItemList controller init"); 
 
\t var self = this; 
 
    self.count = 4; 
 
    self.getItems = function() { 
 
    \t console.log("ItemList.getItems() called"); 
 
\t return []; 
 
    } 
 
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="NGTest"> 
 
<div ng-controller="ItemList as lst"> 
 
<select ng-options="value for value in [1,2,3,4,5]" ng-model="lst.count"></select> 
 
<div ng-repeat="item in lst.getItems()">foo </div> 
 
</div> 
 
</div>

通过日志条目,你可以看到,在启动时,()函数被调用两次lst.getItems。为什么两次?

当您更改lst.count的值时,它也会被调用,根本不使用它。 好吧,我明白,AngularJS不能那么聪明,看到lst.getItems()的代码不依赖于lst.count,但我希望默认情况下,它假定它不,我必须喂它在功能参数。

回答

2

为什么两次

您需要关于如何角消化周期工作读了。如果范围在这些摘要内发生变化,则每个周期至少会运行2次摘要。

使用函数作为ng-repeat的视图源不是一个好主意。获取控制器的数据,并通过查看的范围数组

self.items= getItems(); 

function getItems(){ 
    console.log("ItemList.getItems() called"); 
    return []; 
} 

现在的功能才会被调用一次......当控制器初始化

查看

<div ng-repeat="item in lst.items">{{item}}</div> 
+0

我我的实际应用中,在ng-repeat源中有这个函数的原因是这个列表取决于同一个控制器下的表单控件的值。 – Passiday

+0

在ng-repeat中使用'filter'并根据需要创建自定义过滤器 – charlietfl

+0

这并不容易,列表通过http从数据库中获取。保留客户端的完整列表不是一种选择。 – Passiday