AngularJs ng-repeat of objects orderBy object-id 在数组中
AngularJs ng-repeat of objects orderBy object-id in array
我想按他的特定对象 "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;
}
}])
这是一个示例基本控制器,其中包含数组中的对象和订单 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
谢谢
可能还有另一种好方法,但您可以在不使用过滤器的情况下在控制器中过滤数据。通过使用它,您可以防止 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>
其他方式:您可以遍历 map
:https://jsfiddle.net/sherali/tLrx4uro/2/
$scope.dataObject = {
1: {username:'user1'},
10: {username:'user10'},
20: {username:'user20'},
500: {username:'user500'}
};
$scope.orderByArray = [20,10,1,500];
$scope.result = $scope.orderByArray.map(function(value){
return $scope.dataObject[value];
});
我想按他的特定对象 "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;
}
}])
这是一个示例基本控制器,其中包含数组中的对象和订单 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
谢谢
可能还有另一种好方法,但您可以在不使用过滤器的情况下在控制器中过滤数据。通过使用它,您可以防止 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>
其他方式:您可以遍历 map
:https://jsfiddle.net/sherali/tLrx4uro/2/
$scope.dataObject = {
1: {username:'user1'},
10: {username:'user10'},
20: {username:'user20'},
500: {username:'user500'}
};
$scope.orderByArray = [20,10,1,500];
$scope.result = $scope.orderByArray.map(function(value){
return $scope.dataObject[value];
});