Angular ng-repeat orderBy 无法正常工作答案

【问题标题】：Angular ng-repeat orderBy not working properlyAngular ng-repeat orderBy 无法正常工作
【发布时间】：2015-01-07 03:00:27
【问题描述】：

我在 Angular 上工作过很多次，现在肯定脑子有问题，但似乎无法让简单的 orderBy 正常工作。我有一个数字数组，我想在通过 ng-repeat 显示时按顺序排序。

我的数据：

$scope.data = [200,243,190];

我的标记尝试：

<div ng-repeat="split in data | orderBy">{{split}}</div>
<div ng-repeat="split in data | orderBy:split">{{split}}</div>
<div ng-repeat="split in data | orderBy:'split'">{{split}}</div>
<div ng-repeat="split in data | orderBy:['split']">{{split}}</div>

奇怪的是，即使输入一个错误的参数似乎也没有任何效果。没有错误或什么都没有！

<div ng-repeat="split in data | orderBy:errorPlease">{{split}}</div>

每一次。列表显示为“200,243,190

我有一个JSFiddle 显示我的问题。角 1.2.1

【问题讨论】：

'split' 是数据转发器的局部变量，不能用于试图修改数据的 orderBy。你需要的是一个过滤器，它可以对一组数字进行排序。
orderBy array item value in Angular ng-repeat的可能重复
不是完全重复 - 类似的问题，但列出的解决方案不能解决我的问题。
确实可以，试一试。 jsfiddle.net/HB7LU/8110
在我上面的示例和我的 JSFiddle 中，我的第一次尝试是从另一个问题接受的答案，但这并没有解决我的问题。使用不带任何参数的“orderBy”仍将我的数组返回为“200、243、190” 您发布的 JSFiddle 链接链接到我的小提琴 - 我认为您需要单击“更新”按钮以获取指向您的小提琴的新链接。 :)

标签： angularjs angularjs-ng-repeat

【解决方案1】：

应该将数字转换为字符串并按此排序。

<div ng-repeat="split in data | orderBy:'toString()'">{{split}}</div>

链接：http://jsfiddle.net/HB7LU/8111/

更新：

上面是字符串排序，所以如果你有不同长度的数字，它不会正确排序。

【讨论】：

这确实有效，但为什么呢？我会假设 angular 也可以进行数字排序。
如果您查看 orderBy 文档，docs.angularjs.org/api/ng/filter/orderBy，您可以看到 orderBy 接受字符串、函数或数组。因此，如果您使用字符串，它将在具有该字符串名称的对象上查找属性。如果您添加一个函数，它将使用或 = 对数组中的值进行比较和排序。至于使用数组，我从来没有研究过。
如果您尝试从“拆分数据”中使用拆分，则拆分在 orderBy 中不可用，并且将为空。
使用 toString 会错误地排序，因为它是字符串排序。尝试将 21 添加到要查看的数字列表中。
您需要使用自定义过滤器对原始类型的简单数组进行排序似乎很疯狂。我并不是说情况并非如此，但这肯定是一个基本问题，应该可以使用 angular-proper 来解决。

【解决方案2】：

显然是this is a bug in Angular and has been resolved as of Angular 1.3.0-rc.5。将 AngularJS 库从 1.2.1 换成 1.3.0 RC5 修复了这个错误。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>-->
<body>
    <div ng-controller="myCtrl">
        <p ng-repeat="item in items | orderBy">{{item}}</p>
    </div>
</body>

在我的JSfiddle试试吧

【讨论】：

【解决方案3】：

您必须将数字转换为字符串并确保它们具有一定的长度。

ie.     "001", "023", "200"

等等

【讨论】：