【问题标题】:Sorting dropdown alphabetically in AngularJS在AngularJS中按字母顺序对下拉列表进行排序
【发布时间】:2012-08-31 21:43:16
【问题描述】:

我通过使用 ng-options 来填充下拉列表,该下拉列表连接到控制器,而控制器又调用服务。不幸的是,传入的数据很乱,我需要能够按字母顺序对其进行排序。

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

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

例子:

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

orderBy 中有选项非常有用,这样您就可以在通常尝试对数据进行排序时做任何您想做的事情。

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    对于任何想要在第三层对变量进行排序的人:

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

    【讨论】:

      【解决方案2】:

      Angular 有一个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>
      

      【讨论】:

      • 查看小提琴(或向 Angular ToDo 教程添加排序选择标签),获得显示为“已选择”的选项 - 甚至获得第一个显示选项 - 是一个问题。使用 Angular 它是空白的?
      • @DaveEveritt 设置默认值(并删除空白项)的一种方法是为selected 预先选择绑定项。对于此示例,您可以执行$scope.selected = $scope.friends[0] 之类的操作。有关工作示例,请参阅 this fiddle
      • 如果我希望年龄作为选定的值,而不是整个 JSON 元素,该怎么办?
      • @Rishi 试试这个 ng-options:f.age as f.name for f in friends | orderBy:'name' - here 是一个工作小提琴。更多关于 ng-options here.
      • @Gloopy,这个答案让我成功了 90%。您介意添加一个使用 track by 的案例吗? &lt;select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"&gt;&lt;/selected&gt;。将track by 放在订单过滤器之后并不直观,这个答案是谷歌的热门搜索结果。
      【解决方案3】:

      您应该可以使用过滤器:orderBy

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

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

      这里的项目按“名称”属性以相反的顺序排序。 第二个参数可以是任意排序函数,所以可以按照任意规则排序。

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

      【讨论】:

      • 或者只是 也可以 :)
      【解决方案4】:
      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/

      【讨论】:

      • 一段文字解释这如何回答 OP 的问题和/或你将如何使用它在这里会很有帮助。
      • @SeantheBean 我已经给出了小提琴演示,所以我没有给出解释。
      • @TechnoCrat 无论如何,最好有一个解释。事实上,知道为什么这个解决方案比几年前发布的解决方案更受欢迎会特别有趣。或者,它有什么不同...
      • @Chipowski 好的。今后我会尽量给出解释和答案。
      猜你喜欢
      • 1970-01-01
      • 2012-12-11
      • 1970-01-01
      • 1970-01-01
      • 2013-05-02
      • 2014-02-08
      • 2023-04-01
      • 1970-01-01
      • 2021-10-10
      相关资源
      最近更新 更多