Chrome 中的 AngularJS ngRepeat orderBy [英] AngularJS ngRepeat orderBy in Chrome

问题描述

我有一个简单的应用程序，可以在 Angular 中显示数据行.当控制器最初加载数据时，我希望行以它们添加到我的 rows 数组中的相同顺序出现.因此，orderBy 属性最初将设置为空字符串.单击列标题应将 orderBy 属性设置为适当的值.

这是我的小提琴:http://jsfiddle.net/fLjMR/3/.>

这是我的 JS:

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

这是我的 HTML:

<头><th><a ng-click="orderBy='name'">Name</a></th><th><a ng-click="orderBy='email'">电子邮件</a></th></thead><tr ng-repeat="行中的行 | orderBy:[orderBy]"><td>{{row.name}}</td><td>{{row.email}}</td></tr></tbody>

当我在 IE 和 FF 中执行此操作时，行最初按添加顺序出现，但是当我在 Chrome 中执行此操作时，中间项(在本例中为第 20 行)出现在列表的开头.这是为什么?

解决方案

如果您只有一个属性可供您排序，那么您可以只将字符串传递给过滤器而不是数组:

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?

解决方案

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">

这篇关于Chrome 中的 AngularJS ngRepeat orderBy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！