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

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> 

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

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

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

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

Answer 2

Это 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>