在 AngularJS 中按字母顺序排序下拉列表

我通过使用 ng- 选项填充一个下拉列表,这个下拉列表连接到一个控制器,该控制器反过来调用一个服务。不幸的是,进来的数据是一团糟,我需要能够按字母顺序排序。

你认为像 $.sortBy这样的东西可以做到,但是不幸的是它没有做到。我知道我可以通过 javascript 使用助手方法 function asc(a,b)或类似的东西对它进行排序,但我拒绝相信没有更干净的方法来做这件事,而且我不想用助手方法来膨胀控制器。这是一些基本的原则,所以我不明白为什么 AngularJS 没有这个。

有没有像 $orderBy('asc')这样的方法?

例如:

<select ng-option="items in item.$orderBy('asc')"></select>

orderBy中提供选项将非常有用,这样您就可以在通常尝试对数据排序的任何时候进行任何您想要的操作。

155023 次浏览

Angular 有一个 OrderBy滤波器,可以这样使用:

<select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name'"></select>

有关示例,请参见 这把小提琴

值得注意的是,如果使用 track by,它需要出现在 orderBy滤波器之后,像这样:

<select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></select>

您应该能够使用过滤器: orderBy

orderBy可以接受 reverse标志的第三个选项。

<select ng-option="item.name for item in items | orderBy:'name':true"></select>

这里的项目是按照“名称”属性以相反的顺序排序的。 第二个参数可以是任何顺序函数,因此可以在任何规则中进行排序。

@ see http://docs.angularjs.org/api/ng.filter:orderBy

var module = angular.module("example", []);


module.controller("orderByController", function ($scope) {
$scope.orderByValue = function (value) {
return value;
};


$scope.items = ["c", "b", "a"];
$scope.objList = [
{
"name": "c"
}, {
"name": "b"
}, {
"name": "a"
}];
$scope.item = "b";
});

Http://jsfiddle.net/nfv42/65/

对于那些想在第三层对变量进行排序的人来说:

<select ng-option="friend.pet.name for friend in friends"></select>

你可以这样做

<select ng-option="friend.pet.name for friend in friends | orderBy: 'pet.name'"></select>