ng-options：如何按 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 不是按字母顺序排列的

如何按 countryName 的字母顺序对下拉列表进行排序？提前致谢！

Answer 1

您不能使用 orderBy 过滤器，因为您使用的是对象数据源，而 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

您还可以直接在 Javascript 中对数组进行排序。

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

Answer 4

在您的选择标签中使用 orderBy 服务

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

同时更新 json

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

Plunkr