нг-опции: Как можно сортировать по collection.item.itemName

Question

У меня есть выбор итерация по коллекции вида:

ctrl.countriesList = { 
    'DK': {countryName: 'Denmark', preferredLanguage: 'DA'} 
    'US': {countryName: 'USA', preferredLanguage: 'EN'} 
} 

и итерации по объекту:

ng-options="country as country.countryName for country in $ctrl.countriesList" 

так мое раскрывающееся меню теперь корректно отображает свойство countryName в раскрывающемся списке для каждой страны, но оно по-прежнему сортируется по значению кода ISO (DK, US), которое в моем случае часто будет несовместимо с названиями стран, поэтому сортировка countryNames в выпадающее меню не является алфавитным

Как я могу создать сортировку по имени страны по алфавиту? Заранее спасибо!

Answer 1

Вы не можете использовать orderBy фильтр, как вы используете Datasource Object и orderBy фильтр работает для источника данных массива

See this question

Если вы хотите использовать orderBy фильтр внести изменения в источнике данных как упоминалось в других ответах

Если вы хотите пойти с объектами, я бы предложил вам добавить функцию, которая вернет отсортированные значения.

В контроллере:

$scope.ctrl = {//---> Source 
      countriesList : { 
     'DK': {countryName: 'Denmark', preferredLanguage: 'DA'}, 
     'US': {countryName: 'USA', preferredLanguage: 'EN'}, 
     'BEL':{countryName: 'Belgium', preferredLanguage: 'NL'} 
     } 
} 



$scope.getSortedCountryList = function(){ //--> Sort Function 
$scope.sorted = {}; 
Object.keys($scope.ctrl.countriesList) 
     .sort(function(a,b){ 
      if($scope.ctrl.countriesList[a].countryName < $scope.ctrl.countriesList[b].countryName) return -1; 
      if($scope.ctrl.countriesList[a].countryName > $scope.ctrl.countriesList[b].countryName) return 1; 
      return 0; 
     }) 
     .forEach(function(v, i) { 
      $scope.sorted[v] = $scope.ctrl.countriesList[v]; 
     }); 
return $scope.sorted; 
} 

В HTML select

ng-options="country as country.countryName for country in getSortedCountryList()" 

FIDDLE

Answer 2

Прежде всего перепишите свой набор данных на более простой подход к JSON. Поскольку orderBy не является (а также не будет) реализован для Objects (link)

$scope.countriesList = [ 
     {countryName: 'Denmark', preferredLanguage: 'DA'}, 
     {countryName: 'Belgium', preferredLanguage: 'NL'}, 
     {countryName: 'USA', preferredLanguage: 'EN'} 
    ] 

На уровне представления:

<select ng-options="country.countryName for country in countriesList | orderBy:'countryName':false" ng-model="selected"></select> 

SEE PLUNKR

Answer 3

использования службы OrderBy в вашем выберите тег

<select ng-options="country as country.countryName for country in ctrl.countriesList | orderBy:'countryName':false" ng-model="country"> 

als о уточним JSon

$scope.ctrl.countriesList = [ 
    {countryName: 'Denmark', preferredLanguage: 'DA'}, 
    {countryName: 'USA', preferredLanguage: 'EN'} 
    ] 

Plunkr

Answer 4

Вы также можете отсортировать массив непосредственно в JavaScript.

$scope.countriesList = [ 
     {countryName: 'Denmark', preferredLanguage: 'DA'}, 
     {countryName: 'Belgium', preferredLanguage: 'NL'}, 
     {countryName: 'USA', preferredLanguage: 'EN'} 
    ] 
.sort(function(a, b){ 
    return a.countryName < b.countryName; 
});