這裏的問題是,當您使用ng-repeat
Angular爲列表表達式創建監視時,該列表表達式是項目數組和過濾器的組合。當Angular運行一個摘要時,它會一直調用該表,直到表達式的值不再發生變化。而且由於你的過濾器總是創建一個新的數組,所以每次調用它的值都會發生變化,而且Angular會陷入無限循環。所以,你的代碼是基本相同,這樣做:
$scope.myList = [];
$scope.$watch('myList', function() {
$scope.myList = [];
});
隨着範圍的手錶,你可以告訴角度通過值而不是引用進行比較,以避免無休止的消化問題,像這樣的:
$scope.myList = [];
$scope.$watch('myList', function() {
$scope.myList = [];
}, true); // Passing true as the last argument triggers comparison by value instead
但這不可能在你的情況。
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('Ctrl', function($scope) {
$scope.projects = [
{name: 'My Project 1'},
{name: 'My Project 2'},
{name: 'My Project 3'},
{name: 'My Project 4'},
{name: 'My Project 5'},
{name: 'My Project 6'}
];
var splitIntoRows = function(array, columns) {
if (array.length <= columns) {
return [array];
}
var rowsNum = Math.ceil(array.length/columns);
var rowsArray = new Array(rowsNum);
for (var i = 0; i < rowsNum; i++) {
var columnsArray = new Array(columns);
for (j = 0; j < columns; j++) {
var index = i * columns + j;
if (index < array.length) {
columnsArray[j] = array[index];
} else {
break;
}
}
rowsArray[i] = columnsArray;
}
return rowsArray;
}
$scope.$watch('projects', function() {
$scope.projectRows = splitIntoRows($scope.projects, 3);
});
});
</script>
</head>
<body ng-controller="Ctrl">
<ul class="row" ng-repeat="projectRow in projectRows">
<li class="span4" ng-repeat="project in projectRow">
{{project.name}}
</li>
</ul>
</body>
</html>
如果你仍然想使用此過濾器,你就必須實現過濾器內部緩存,使:所以在需要的時候,這樣的事情你最好的賭注對此只拆分項目陣列分成更小的數組當使用相同的參數調用過濾器時,確保始終返回相同的數組引用。但這是一個滑坡,因爲您需要使緩存無效以避免內存泄漏。
這工作正常,謝謝! – 2013-03-10 01:46:56