AngularJs ng重复对象orderBy通过数组中的object-id

Question

I want to order the result of an ng-repeat of objects by his specific object "id". This order is in an array so i made this custom filter 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;
    }
}])

And that's an example basic controller with the objects and the order id in an array:

.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];

}])

With his 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/

so...

• All is working Ok but i don't know if there is another way to order the ng-repeat like i did without using a custom filter.

• As well if you go to the Jsfiddle in the browser console you can see how my custom filter is returning 2 times the result and i don't know why.

PD: English is not my 1st language :D

Thanks

Answer 1

There may be another good approach but you can filter your data inside your controller without using filter. By using this you can prevent angular to calling the filter twice.

$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]);
  });
}]);

Inside the template

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

Answer 2

Other way: you can iterate through 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];
  });