Question

我有：

<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对其进行排序？

Answer 1

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

这就是我想象你会看到他们相应的订单。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

看起来你有以下两件应该排序的东西。

您已关闭double quotes之前的" | toArray "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>

spring boot

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

2 个答案: