AngularJS实现按表头列排序功能的问题求助

看起来你已经在控制器里初始化了排序的基础变量，接下来咱们一步步把排序功能补全，分视图和控制器两部分来调整：

1. 视图层（HTML）调整 #

在表格的表头列上添加点击事件切换排序字段和方向，同时用orderBy过滤器处理表格数据：

<table>
  <thead>
    <tr>
      <!-- 名称列排序 -->
      <th ng-click="$ctrl.sortBy('name')">
        名称
        <!-- 显示排序状态标识 -->
        <span ng-show="$ctrl.orderByField === 'name'">
          {{$ctrl.reverseSort ? '↑' : '↓'}}
        </span>
      </th>
      <!-- ID列排序 -->
      <th ng-click="$ctrl.sortBy('id')">
        ID
        <span ng-show="$ctrl.orderByField === 'id'">
          {{$ctrl.reverseSort ? '↑' : '↓'}}
        </span>
      </th>
      <!-- 子项列排序 -->
      <th ng-click="$ctrl.sortBy('children')">
        子项
        <span ng-show="$ctrl.orderByField === 'children'">
          {{$ctrl.reverseSort ? '↑' : '↓'}}
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- 用orderBy过滤器绑定排序规则 -->
    <tr ng-repeat="item in $ctrl.myArray | orderBy:$ctrl.orderByField:$ctrl.reverseSort">
      <td>{{item.name}}</td>
      <td>{{item.id}}</td>
      <td>{{item.children.join(', ')}}</td>
    </tr>
  </tbody>
</table>

2. 控制器层完善 #

在控制器里添加sortBy方法切换排序逻辑，要是需要对children这种数组字段做自定义排序，还可以加个专属排序函数：

// 控制器构造函数代码
constructor() {
  this.myArray = [ 
    {name: "name1", id: 1, children: ["one", "two"]}, 
    {name: "name2", id: 2, children: ["two"]}, 
    {name: "name3", id: 3, children: ["one", "two"]}, 
    {name: "name4", id: 4, children: ["one"]} 
  ];
  this.orderByField = 'name';
  this.reverseSort = false;
}

// 排序切换方法
sortBy(field) {
  // 点击当前排序字段则反转方向，否则切换字段并重置为升序
  if (this.orderByField === field) {
    this.reverseSort = !this.reverseSort;
  } else {
    this.orderByField = field;
    this.reverseSort = false;
  }
}

// 自定义子项排序函数（比如按数组长度排序）
customChildrenSort(item) {
  return item.children.length;
}

如果要用自定义排序，把视图里的orderBy改成：

<tr ng-repeat="item in $ctrl.myArray | orderBy:$ctrl.customChildrenSort:$ctrl.reverseSort">

常见问题排查 #

• 确认AngularJS模块引入正常，组件的this指向没有问题
• 检查ng-repeat和orderBy的语法拼写，有没有漏写符号
• 若排序字段是复杂类型，确保自定义排序函数返回的是可比较的数值/字符串

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