ng-options：如何按 collection.item.itemName 排序

Question

我有一个 select 遍历集合，如下所示：

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）排序，在我的情况下，这通常与国家名称，因此下拉列表中的国家名称不是按字母顺序排序的

如何使下拉列表按国家/地区名称的字母顺序排序？提前致谢！

Answer 1

首先，将您的数据集重写为更 'simple' / '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 2

在您的 select 标签中使用 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

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 过滤器，因为您正在使用对象数据源，并且 orderBy 过滤器适用于数组数据源

如果您想使用 orderBy 过滤器，请按照其他答案中所述对您的数据源进行更改

如果您想使用对象，我建议您添加一个函数来 return 排序值。

在控制器中：

$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;
}

在HTMLselect

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

FIDDLE

ng-options：如何按 collection.item.itemName 排序

ng-options: How can I sort by collection.item.itemName

javascript

angularjs

sorting

ng-options