使用 AngularJS 对大表进行排序答案

【问题标题】：Sorting big tables with AngularJS使用 AngularJS 对大表进行排序
【发布时间】：2020-02-14 09:17:16
【问题描述】：

我想对使用ng-repeat 检索标题和内容的表进行排序。当我单击标题项时，我希望该列按字母顺序排序。但我不确定如何完成这项工作

这是我的html：

<div class="pane pane--table1">
  <div class="pane-hScroll">
    <table>
      <thead>
        <tr>
          <th ng-repeat="item in header" ng-click="sortColumn()">{{item}}</th>
        </tr>
      </thead>
    </table>
    <div class="pane-vScroll">
      <table>
        <tbody>
          <div ng-include="'templates/includes/ajax_spinner.html'"></div>
          <tr ng-repeat="(key, value) in content">
            <td ng-repeat="val in value track by $index">{{val}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

【问题讨论】：

你可以使用 ui-grid angular 库，它提供了很多选项。 ui-grid.info

标签： angularjs sorting html-table angularjs-ng-repeat

【解决方案1】：

您可以使用带有属性名称的 orderBy 过滤器，如下所示

<div ng-app="app" ng-controller="MyController">
  <div ng-repeat="item in array  | orderBy: !changeFilter ? '-date' : 'name'">
    <div>{{item.name}}</div>
  </div>
  <button ng-click="changeFilter=!changeFilter">
    change
  </button>

</div>

这里是 JSFiddle https://jsfiddle.net/aiubian/fn44eqkb/

【讨论】：