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

143

我通过使用ng-options填充下拉菜单，该选项挂接到控制器，然后调用服务。不幸的是，进入的数据是一团糟，我需要能够按字母顺序排序。在AngularJS中按字母顺序排列下拉列表

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

有没有办法做一些像$orderBy('asc')？

例子：

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

这将是在orderBy选项，这样你可以做任何你想要非常有用，你通常尝试对数据进行排序。

来源

2012-09-07 J Castillo

304

角具有orderBy过滤器，可这样使用：

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

为一个例子见this fiddle。

值得一提的是，如果正在使用track by它需要orderBy过滤器后出现，像这样：

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

来源

2012-09-07 03:02:13 Gloopy

看着在小提琴上（或者为Angular ToDo教程增加一个排序选择标签），获得一个显示为“选定”的选项 - 或者甚至获得第一个显示选项 - 是一个问题。用Angular它是空白的？ –

@DaveEveritt设置默认值（并删除空白项目）的一种方法是预先为“选定”选择一个绑定项目。对于这个例子，你可以做一些像'$ scope.selected = $ scope.friends [0]'的东西。请参阅[this fiddle]（http://jsfiddle.net/aBccw/142/）了解正在使用的示例。 – Gloopy

不适用于我，但是这是：http://stackoverflow.com/a/18261445/2178340 – Gerson

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

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

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

这里的项目是按相反的顺序'name'属性排序。第二个参数可以是任何顺序函数，因此您可以按任何规则排序。

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

来源

2012-09-07 03:14:40 Tosh

或只是作品也:) – Mahbub

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/

来源

2015-02-26 17:06:20 TechnoCrat

有点文字解释了如何这回答OP的问题和/或你将如何使用它将在这里非常有帮助。 –

@SeantheBean我已经给小提琴演示，所以我没有给出解释。 – TechnoCrat

@技术无论如何，解释将是可取的。事实上，知道为什么这种解决方案比多年前发布的解决方案更受欢迎会特别有趣。或者，它有多么不同... – Chipowski

的人谁愿意在第三层的变量进行排序：

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

来源

2018-03-07 04:47:02

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

回答

相关问题