Javascript AngularJS错误:[$rootScope:infdig]由筛选器导致
我想按AngularJS过滤器对对象进行排序。但使用自定义筛选器时会出现无限$digest错误 我想列出下列语言。列表按语言名称排序Javascript AngularJS错误:[$rootScope:infdig]由筛选器导致,javascript,angularjs,angularjs-filter,Javascript,Angularjs,Angularjs Filter,我想按AngularJS过滤器对对象进行排序。但使用自定义筛选器时会出现无限$digest错误 我想列出下列语言。列表按语言名称排序 阿尔巴尼亚语 阿拉伯文 荷兰语 英式 古吉拉特邦 希伯来立陶宛语 俄罗斯人 斯洛伐克语 乌尔都语 下面是HTML <!DOCTYPE html> <html lang="ja" ng-app="MYAPP"> <head> <meta charset="UTF-8"> <script src
- 阿尔巴尼亚语
- 阿拉伯文
- 荷兰语
- 英式
- 古吉拉特邦
- 希伯来立陶宛语
- 俄罗斯人
- 斯洛伐克语
- 乌尔都语
<!DOCTYPE html>
<html lang="ja" ng-app="MYAPP">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="app.js"></script>
<title>Sort Object</title>
</head>
<body>
<div ng-controller="languagesCtrl">
<ul>
<li ng-repeat="language in languages | objectOrderBy:'name'">
{{language.value.name}}
</li>
</ul>
</div>
</body>
</html>
无法更改$scope.languages的结构,因为它实际上由API服务器提供服务。为什么会发生错误?请告诉我如何解决这个问题 问题是您使用的
过滤器不正确
Angularfilter
的工作原理类似于Array.prototype.filter()
,它迭代数组,对每个索引执行回调
角度过滤器实际上返回过滤器函数,这是通过return function(){}
执行的,但是在返回函数中,您返回的是另一个函数(排序方法)
已达到错误$digest()迭代次数。流产如果已到达,则代码>将停止,而不是继续执行并清除堆栈,函数将停止,而不是导致浏览器崩溃(这很好!)
要解决这个问题,我建议您要么在过滤器外部排序,就在控制器内部排序(我不建议这样做),要么从API调用内部在服务器端排序(这可能很好),或者重新编写自定义过滤器以返回单个函数,而不是尝试从每个过滤器调用中对整个数组进行排序。你应该看看有角度的内置过滤器,因为其中一个可能会有帮助,但你也可以看到它们是如何构建的。你应该创建一个js fiddle。谢谢你的建议。我将依靠内置过滤器。
angular.module('MYAPP', []).
filter('objectOrderBy', function(){
return function(obj, prop){
var array = [];
for(var key in obj){
array.push({
key: key,
value: obj[key]
});
}
return array.sort(function(o1, o2){
return (o1.value[prop] > o2.value[prop])? 1: -1;
});
};
}).
controller('languagesCtrl', ["$scope", function($scope){
$scope.languages = {
"sq": {
"name": "Albanian"
},
"ar": {
"name": "Arabic"
},
"nl": {
"name": "Dutch"
},
"en": {
"name": "English",
},
"gu": {
"name": "Gujarati"
},
"he": {
"name": "Hebrew"
},
"lt": {
"name": "Lithuanian"
},
"ru": {
"name": "Russian"
},
"sk": {
"name": "Slovak"
},
"ur": {
"name": "Urdu"
}
};
}]);