AngularJS ngRepeat orderBy in Chrome

问题

I have a simple app that shows rows of data in Angular. When the controller is initially loaded with data, I want the rows to appear in the same order they were added to my rows array. So, the orderBy property will initially be set to an empty string. Clicking on the column header should then set the orderBy property to the appropriate value.

Here's my fiddle: http://jsfiddle.net/fLjMR/3/.

Here's my JS:

function ctrl($scope)
{
    var rows = [];
    for(var i = 10;i < 30;i++)
    {
        rows.push({name: "Fake Name " + i, email: "fakeemail" + i + "@gmail.com"});
    }

    $scope.rows = rows;
    $scope.orderBy = "";
};

Here's my HTML:

<table ng-app ng-controller="ctrl">
    <thead>
        <th><a ng-click="orderBy='name'">Name</a></th>
        <th><a ng-click="orderBy='email'">Email</a></th>
    </thead>
    <tbody>
        <tr ng-repeat="row in rows | orderBy:[orderBy]">
            <td>{{row.name}}</td>
            <td>{{row.email}}</td>
        </tr>
    </tbody>
</table>

When I do this in IE and FF, the rows intially appear in the order they were added, but when I do it in Chrome, the middle item (in this case row #20) appears at the beginning of the list. Why is this?

回答1:

If you only have one property that you order by then you can pass just the string to the filter rather than an array:

<tr ng-repeat="row in rows | orderBy:orderBy">

来源：https://stackoverflow.com/questions/21343168/angularjs-ngrepeat-orderby-in-chrome