Passing json value to OrderBy in html template

Question

I'm iterating over an object and trying to OrderBy the Heading's based on the ColPos value. But this does not work and orderby is not set how can I resolve this ?

<th ng-repeat="(key, value) in instancesData.Attributes | orderBy:'value.ColPos'" >
     <span>{{key}}</span>
</th>

Demo : http://plnkr.co/edit/X90n24vx2wqKvXZuDYLJ?p=preview

You are trying to use the filter orderBy with an object, but this filter only works with Arrays, you will have to either change the model to an Array or make your own filter. — Josep, Oct 11 '14 at 15:46
Take a look here: http://stackoverflow.com/questions/19387552/angular-cant-make-ng-repeat-orderby-work — gearsdigital, Oct 11 '14 at 15:50
@gearsdigital the most voted version of that question won't solve the OP's problem because the keys of the object are not being stored in the resulting array of the 'object2Array' custom filter. — Josep, Oct 11 '14 at 16:03
@user1184100 writing that custom filter it's not going to be easy, since you will have to preserve the keys of the objects, it's quite likely that you will run into an infinite diggest loop issue... Because that filter will have to create new elements every time you use it. — Josep, Oct 11 '14 at 16:08

Josep · Accepted Answer · 2014-10-11T16:05:17.940

As I already said in the comments: you are trying to use the filter orderBy with an object, but this filter only works with Arrays, you will have to either change the model to an Array or make your own filter.

I will give you a solution for the first option.

In your controller do this:

$scope.dataAttributesArray = 
   Object.keys($scope.instancesData.Attributes).map(function(key){
      return {key:key, val:$scope.instancesData.Attributes[key]};
   });

And then in your view you can do this:

<th ng-repeat="attribute in dataAttributesArray | orderBy:'val.ColPos'" data-x="{{value.ColPos}}" >
        <span>{{attribute.key}}</span>
</th>

Passing json value to OrderBy in html template

1 Answers1

Working Example