0

I know in my current version of Angular, ng-repeat auto sorts. My problem is that its sorting doesn't appear to be correct.

Taking an object with numbered keys:

{
    "1": "value",
    "2": "value",
    "10": "value"
}

ng-repeat sorts it 1, 10, 2. I'm familiar with this sort of sorting and throwing a 0 on the front of number should fix it. However adding that 0 requires additional code and would need to be stripped out for display.

Likewise, converting to an array caused ng-repeat to loop through all of the empty values (3-9) and creates excess elements, as well as generating a duplicate error.

How can I make ng-repeat sort an object by keys as if they were integers?

sharf
  • 2,123
  • 4
  • 24
  • 47
  • @nephiw I am using 1.3.5. 1.4 does remove their default sorting and helps, but it's not a guaranteed solution. – sharf May 31 '15 at 02:40

1 Answers1

1

I was not able to find a solution that didn't change your data structure, but here is an example of how it can be done by using keys to sort the object into an array. Here is the html:

<ul ng-controller="ExampleController">
  <li ng-repeat="item in filtered">{{ item.value }}</li>
</ul>

And here is the code:

  controller('ExampleController', ['$scope', function($scope) {
    $scope.list = {
      "1": "1 Value",
      "10": "10 Value",
      "5": "5 Value",
      "2": "2 Value"
    };

    $scope.$watch('list', function (newVal) {
       $scope.filtered = Object.keys(newVal).map(function (key) {
        return { key: key, value: newVal[key] };
      });
    });
  }]);

The output of this code looks like this:

  • 1 Value
  • 2 Value
  • 5 Value
  • 10 Value

Note that this creates an array of key/value pair objects which is easier to work with. Here is a plunker example of it working: http://plnkr.co/edit/Q0BYLeMzTZmd1k8VzTlQ?p=preview

nephiw
  • 1,964
  • 18
  • 38
  • Hmm.. when calling your filter in my `ng-repeat` I get an infinite digest loop error. – sharf May 31 '15 at 03:09
  • That is true. It looks like you will need to do the mapping in the scope and display the edited result. If you are working with objects instead of arrays, you can use this filter to get it done: https://github.com/petebacondarwin/angular-toArrayFilter but note that it only works for dictionaries of objects, so strings will cause an error. – nephiw May 31 '15 at 03:27
  • I changed the answer to fix the infinite digest problem, but it means you need to use a watch to handle data changes. – nephiw May 31 '15 at 03:36
  • Thank, I'll see what I can come up with. If I wasn't 75% done with this app I'd switch off Angular. Doing the simplest things require so much work. – sharf May 31 '15 at 03:38