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

【问题标题】：Sorting table rows using AngularJS使用 AngularJS 对表格行进行排序
【发布时间】：2014-08-09 18:58:21
【问题描述】：

我刚刚开始使用 AngularJS，我正在尝试对我的表格进行排序，以便在单击表格标题时根据该表格标题对行进行排序。

这是我的 plnkr 链接： http://plnkr.co/edit/mbTq5865KKNzlvpJJy1l

这是我的相关代码：控制器代码：

$scope.setRepoSortOrder = function(order) {
      if ($scope.repoSortOrder === order) {
        if ($scope.repoSortOrder.charAt(0) === '+') {
          order = order.replace('+', '-');
        } else {
          order = order.replace('-', '+');
        }
      }
      $scope.repoSortOrder = order;
    };

表：

<table>
    <thead>
        <tr>
            <th><a href="" ng-click="setRepoSortOrder('-name')">Name</a></th>
            <th><a href="" ng-click="setRepoSortOrder('+stargazers_count')">Stars</a></th>
            <th><a href="" ng-click="setRepoSortOrder('-language')">Language</a></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="repo in repos | orderBy:repoSortOrder">
            <td>{{repo.name}}</td>
            <td>{{repo.stargazers_count | number}}</td>
            <td>{{repo.language}}</td>
        </tr>
    </tbody>
</table>

因此，当单击名称 th 时，应按名称对行进行排序 - 与 stargazers_count 和语言相同。如果再次单击 th，它应该按相反的顺序排序（如果我先单击名称，它会按名称按 asc 顺序排序 - 如果我再次单击它，它会按 desc 顺序排序）。

最后：名称和语言最初应按升序排序，而 stargazers_count 应按降序排序。

我自己做过这个，但我不知道我是否做得最好。由于我不习惯“角度风格”，我想听听熟悉 AngularJS 的人如何处理这个问题。请查看 plnkr 链接，看看您是否可以改进它。

感谢任何回复！

【问题讨论】：

你可以试试this question中的自定义过滤器
@Pheonixblade9 我看过这个问题，但我不太明白过滤器对我有什么帮助。无论如何，我已经提出了自己的解决方案（请参阅 plnkr 链接），但我不知道这是否是最好的编码方式？

标签： javascript angularjs

【解决方案1】：

可以改进的一件事是使用 orderBy 过滤器的反向标志，如下所示：

$scope.repoSortOrder = "-stargazers_count";
$scope.isReverse = false;

$scope.setRepoSortOrder = function(order) {
  $scope.isReverse = ($scope.repoSortOrder === order) ? !$scope.isReverse : false;
  $scope.repoSortOrder = order;
};

Plunker 示例： http://plnkr.co/edit/CM1BGkQc0AYbrraAPq8r?p=preview

【讨论】：