Как отсортировать выпадающий список объектов в AngularJS

У меня есть:

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

Вывод сортируется по идентификатору, но мне нужно отсортировать его по имени. Я старался:

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

но в консоли я получаю: TypeError: dbg is undefined. Как я могу отсортировать его с помощью Angular?


spring-boot angularjs jhipster
person Nico    schedule 24.11.2016    source источник
comment
также отслеживать операторы всегда после любой фильтрации, которая может быть выполнена.   -  person alphapilgrim    schedule 25.11.2016

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, что это должно заставить вас работать в правильном направлении. Надеюсь, поможет! Включен рабочий пример, в котором третий параметр 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>

person alphapilgrim    schedule 24.11.2016

arrow_upward
1
arrow_downward

Это working example так же, как и в вашем случае.

Похоже, у вас были следующие две вещи, которые следует отсортировать.

  1. Вы закрыли double quotes перед " | toArray в "product as product.name for product in vm.products track by product.id" | toArray | orderBy : 'name'"
  2. Также 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>

person Aruna    schedule 24.11.2016