如何在AngularJS中对ng-repeat遍历的字典数据按值排序？

嘿，这个问题我之前也踩过坑！AngularJS自带的orderBy过滤器确实只对**数组（对象列表）**生效，直接给普通的键值对字典用肯定没反应。不过咱们转个思路，把字典转换成包含键和值的对象数组，就能完美用上orderBy了，具体步骤如下：

方法一：用自定义过滤器转换字典（推荐，复用性高） #

先创建一个过滤器，把字典转成键值对对象数组：

// 在你的AngularJS模块里定义过滤器
angular.module('yourAppName')
.filter('dictToArray', function() {
  return function(inputDict) {
    var resultArray = [];
    // 遍历字典，把每个键值对包装成对象
    angular.forEach(inputDict, function(value, key) {
      resultArray.push({ 
        key: key, 
        value: value 
      });
    });
    return resultArray;
  };
});

然后在HTML的表格里直接使用这个过滤器+orderBy：

<table>
  <thead>
    <tr>
      <th>键</th>
      <th>值</th>
    </tr>
  </thead>
  <tbody>
    <!-- 先转数组，再按value排序 -->
    <tr ng-repeat="item in yourDict | dictToArray | orderBy:'value'">
      <td>{{ item.key }}</td>
      <td>{{ item.value }}</td>
    </tr>
  </tbody>
</table>

方法二：在控制器里提前转换字典 #

如果不需要复用转换逻辑，也可以直接在控制器里把字典转成数组：

// 假设你的原始字典是$scope.myDict
$scope.myDict = { 
  "苹果": 10, 
  "香蕉": 5, 
  "橙子": 15 
};

// 转换为键值对数组
$scope.dictArray = [];
angular.forEach($scope.myDict, function(value, key) {
  $scope.dictArray.push({ key: key, value: value });
});

然后HTML里直接用转换后的数组排序：

<tr ng-repeat="item in dictArray | orderBy:'value'">
  <td>{{ item.key }}</td>
  <td>{{ item.value }}</td>
</tr>

拓展：实现升序/降序切换 #

如果需要支持点击表头切换排序方向，只需要加个控制变量：

// 控制器里初始化排序方向（false=升序，true=降序）
$scope.sortReverse = false;

HTML里修改为：

<th ng-click="sortReverse = !sortReverse">
  值 <span ng-show="!sortReverse">↑</span><span ng-show="sortReverse">↓</span>
</th>
<tr ng-repeat="item in dictArray | orderBy:'value':sortReverse">
  <!-- ... -->
</tr>

自定义排序逻辑（可选） #

如果你的值是字符串（需要忽略大小写）或者有特殊比较需求，还可以给orderBy传一个自定义排序函数：

$scope.customSort = function(item) {
  // 比如忽略字符串大小写排序
  if (typeof item.value === 'string') {
    return item.value.toLowerCase();
  }
  return item.value;
};

然后HTML里用：

<tr ng-repeat="item in dictArray | orderBy:customSort:sortReverse">

这样操作后，表格就能完美按照字典的值排序啦！

内容的提问来源于stack exchange，提问作者cornelinux