AngularJS，Ng-repeat改变/改变Json数组的顺序

Question

Dear friends of SO:

18 of March, 2014. I'm dealing with a situation here, at the moment of using ng-repeat, the elements inside the array (which I'm fetching from a Json string) change the original order.

Just to be clear, the first variables inside the array are related to the order_id and the person name, while the last ones, are related to the credit information.

I'm getting a completely messed up order on the information, could be alphabetical, I'm not sure.

No weird things in the code:

<li ng-repeat="(variable, valor) in records" >
     <a href="">{{variable}}: </a>
     <a href="">{{valor}}</a>
</li>

Any reference?

Thanks in advance! Chris;

Answer 1

chris: the sorting of the keys was alphabetical, and this was fixed in the recent release of Angular 1.4. As stated in the official Angular documentation below:

Version 1.4 removed the alphabetic sorting. We now rely on the order returned by the browser when running for key in myObj

https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

You could use the orderBy filter to do this. I am giving an example below;

Suppose yo have a controller like this:

function Ctrl($scope) {
  $scope.friends =
      [{name:'John', phone:'555-1212', age:19},
       {name:'Mary', phone:'555-9876', age:10},
       {name:'Mike', phone:'555-4321', age:21},
       {name:'Adam', phone:'555-5678', age:35},
       {name:'Julie', phone:'555-8765', age:29}]
  $scope.predicate = '-age';
}

And in HTML:

  <div ng-controller="Ctrl">
    <table class="friend">
      <tr>
        <th>Name

        <th>Phone Number</th>
        <th>Age</th>
      </tr>
      <tr ng-repeat="friend in friends | orderBy:predicate">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
        <td>{{friend.age}}</td>
      </tr>
    </table>
  </div>

The result would be like:

Name    Phone Number    Age
Adam    555-5678        35
Julie   555-8765        29
Mike    555-4321        21
John    555-1212        19
Mary    555-9876        10

I think something like this will solve your issue.

If you want to sort ascending according to age just change this line in your controller

$scope.predicate = '+age';