1

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

Improve this question
4
  • See for your second problem stackoverflow.com/questions/9682092/databinding-in-angularjs Commented Sep 7, 2015 at 9:13
  • @intekhab is for datbinding problem? apply's diggest's..? So it's an angularjs native problem? Can i do something to solve that? Commented Sep 7, 2015 at 9:25
  • I would create js function in controller to do the same as your filter 'objectIdFilter' does, and call it once, because filter getting called every time you do something with collection. Commented Sep 7, 2015 at 9:25
  • ok i see. You guys are right, i can do the same and clear the html template code. Commented Sep 7, 2015 at 9:28

2 Answers 2

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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];
  });
Improve this answer

4 Comments

it's a valid answer but i searched a little what can be better and i found jsperf.com/map-foreach i don't know if that can be valid for angular.forEach i will investigate a bit more :D Thanks
@nada. Thanks for above link. I didn't know
also, i researched above foreach(angular and native). I found that: jsperf.com/angular-foreach-vs-native-for-loop/3
angular.forEach(arr...) is faster than arr.forEach(...)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.