gpt4 book ai didi

javascript - AngularJs ng-repeat of objects orderBy object-id in array

转载 作者:行者123 更新时间:2023-11-30 16:37:52 25 4
gpt4 key购买 nike

我想通过他的特定对象“id”对对象的 ng-repeat 的结果进行排序。这个订单在一个数组中,所以我制作了这个自定义过滤器 ng-repeat="line in dataObject|objectIdFilter:orderByArray":

.filter('objectIdFilter', [function() {
return function(inputObjet, orderArray) {
var result = [];
angular.forEach(orderArray, function(value) {
result.push(inputObjet[value]);
});
console.log(result);
return result;
}
}])

这是一个示例基本 Controller ,其中包含数组中的对象和订单 ID:

.controller('MainCtrl', ['$scope', function($scope) {

$scope.dataObject = {
1: {username:'user1'},
10: {username:'user10'},
20: {username:'user20'},
500: {username:'user500'}
};

$scope.orderByArray = [20,10,1,500];

}])

用他的 HTML:

<div ng-app="myApp">
<div ng-controller="MainCtrl">
<div ng-repeat="line in dataObject|objectIdFilter:orderByArray">{{line.username}}</div>
</div>
</div>

Jsfiddle:https://jsfiddle.net/infnadanada/tLrx4uro/

所以...

  • 一切正常但我不知道是否有另一种方法可以像我一样在不使用自定义过滤器的情况下订购 ng-repeat。

  • 另外,如果您转到浏览器控制台中的 Jsfiddle,您会看到我的自定义过滤器返回的结果是结果的 2 倍,我不知道为什么。

PD:英语不是我的第一语言 :D

谢谢

最佳答案

可能还有另一种好方法,但您可以在不使用过滤器的情况下在 Controller 中过滤数据。通过使用它,您可以防止 Angular 调用过滤器两次。

$scope.dataObject = {
1: {username:'user1'},
10: {username:'user10'},
20: {username:'user20'},
500: {username:'user500'}
};
$scope.orderByArray = [20,10,1,500];
$scope.result = [];
angular.forEach($scope.orderByArray, function(value) {
$scope.result.push($scope.dataObject[value]);
});
}]);

模板内部

<div ng-app="myApp">
<div ng-controller="MainCtrl">
<div ng-repeat="line in result">{{line.username}}</div>
</div>
</div>

关于javascript - AngularJs ng-repeat of objects orderBy object-id in array,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32434544/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com