如何在AngularJS中对对象的下拉列表进行排序答案

【问题标题】：How to sort dropdown list of objects in AngularJS如何在AngularJS中对对象的下拉列表进行排序
【发布时间】：2017-04-09 06:49:36
【问题描述】：

我有：

<select class="form-control" id="field_productDelivered" name="productDelivered" ng-model="vm.productDelivered.productDelivered" ng-options="product as product.name for product in vm.products track by product.id">
  <option value=""></option>
</select>

输出按 id 排序，但我需要按名称排序。我试过了：

ng-options="product as product.name for product in vm.products track by product.id" | toArray | orderBy : 'name'"

但在控制台中我得到： TypeError: dbg is undefined。如何使用 Angular 对其进行排序？

【问题讨论】：

也跟踪语句总是在任何可能完成的过滤之后。

标签： angularjs spring-boot jhipster

【解决方案1】：

我认为这应该会让你的输出朝着正确的方向发展。希望能帮助到你！包括一个工作示例，第三个参数 true 以相反的顺序显示项目。

这就是我想你的样子让他们相应地订购。

ng-options="product as product.name for product in vm.products | toArray | orderBy : 'name' track by product.id"

function exampleController($scope) {
  $scope.phones = [{
    model: 'anteater'
  }, {
    model: 'bee'
  }, {
    model: 'cat'
  }];
}

angular
  .module('example', [])
  .controller('exampleController', exampleController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-fluid" ng-app="example">
  <div class="container" ng-controller="exampleController">
    <div class="row">
      <ol>
        <li ng-repeat="phone in phones | orderBy: 'model': true track by $index" ng-bind="phone.model"></li>
      </ol>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

这是working example，与您的情况相同。

看起来你有以下两件事应该排序。

您在" | toArray 之前关闭了double quotes "product as product.name for product in vm.products track by product.id" | toArray | orderBy : 'name'"
track by product.id 也应该在末尾像ng-options="product as product.name for product in vm.products | toArray | orderBy : 'name' track by product.id"这样的过滤器

您可以看到下面的working example 与问题中的相同。

var app = angular.module('app', []);

app.controller('TestController', function() {
  this.productDelivered = {};
  this.products = {
    'product1': {
      id: 4,
      name: 'product B'
    },
    'product2': {
      id: 3,
      name: 'product D'
    },
    'product3': {
      id: 1,
      name: 'product A'
    },
    'product4': {
      id: 2,
      name: 'product C'
    }  
  };
});

app.filter("toArray", function() {
        return function(input) {
            if(!input) return;

            if (input instanceof Array) {
                return input;
            }

            return $.map(input, function(val) {
                return val;
            });
        };
});

angular.bootstrap(document, ['app']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TestController as vm">
<select class="form-control" id="field_productDelivered" name="productDelivered" ng-model="vm.productDelivered.productDelivered" 
        ng-options="product as product.name for product in vm.products | toArray | orderBy : 'name' track by product.id">
    <option value=""></option>
</select>
</div>

【讨论】：