Question

我试图让一个表能够按所有列排序，但遇到一些麻烦。我从Web服务中提取一些数据来填充表格，但随后想要在用户想要的任何地方进行排序。我有plunker here。我的近距离尝试。我在想这样的事情：

$scope.order = function(predicate, reverse) {
      $scope.recentalerts = orderBy($scope.recentalerts, predicate, reverse);
    };

从有角度的网站可能会起作用，但是在将它集成到我自己的表中时遇到了一些麻烦。我究竟做错了什么？或者有更简单的方法吗？我只想坚持像this example这样的普通角度。

Answer 1

您的示例正在运行（修复plunkR之后），但您始终强制reverse到false。

如果你想重现Angular所做的事情，它与每次点击的reverse参数相反，你可以添加像这样的东西：

$scope.orders[predicate] = !$scope.orders[predicate];
$scope.recentalerts = orderBy($scope.recentalerts, predicate, $scope.orders[predicate]);

见plunkr工作：

http://plnkr.co/edit/Z9LDlWvwWV82D65pfiF6?p=preview

或者以更简单的形式，使用常见的$scope.reverse属性：

http://plnkr.co/edit/sMD7ZqmsJ7bULa26jo6q?p=preview

Answer 2

这里是我用于在表格中滚动自己的排序的片段。只需使用字符串来确定我想要排序的属性（反向支持）并动态更改它，然后在ng-repeat上使用orderBy。

希望这有帮助。

＆＃13;

angular.module('app', [])
  .controller('testCtrl', ['$scope',
    function($scope) {
      $scope.sortBy = 'ID';
      $scope.sort = function(sortBy) {
        if ($scope.sortBy == sortBy) {
          $scope.sortBy = '-' + sortBy
        } else {
          $scope.sortBy = sortBy;
        }
      }

      $scope.people = [{
        'ID': 1,
        'Name': 'Aaron',
        'Age': 70
      }, {
        'ID': 28,
        'Name': 'Ben',
        'Age': 60
      }, {
        'ID': 2,
        'Name': 'Claire',
        'Age': 50
      }, {
        'ID': 14,
        'Name': 'Damian',
        'Age': 40
      }, {
        'ID': 8,
        'Name': 'Frank',
        'Age': 30
      }];
    }
  ]);

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body ng-app="app">
  <div ng-controller="testCtrl">
    <div id="wrapper">
      <div style="margin: 1em">
        <h4>Recent Alerts</h4>
        <div>
          <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th ng-click="sort('ID')">ID
                  <i class="fa fa-caret-down" ng-show="sortBy=='-ID'"></i>
                  <i class="fa fa-caret-up" ng-show="sortBy=='ID'"></i>
                </th>
                <th ng-click="sort('Name')">Name
                  <i class="fa fa-caret-down" ng-show="sortBy=='-Name'"></i>
                  <i class="fa fa-caret-up" ng-show="sortBy=='Name'"></i>
                </th>
                <th ng-click="sort('Age')">Age
                  <i class="fa fa-caret-down" ng-show="sortBy=='-Age'"></i>
                  <i class="fa fa-caret-up" ng-show="sortBy=='Age'"></i>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr data-ng-repeat="person in people | orderBy: sortBy">
                <td ng-bind="person.ID"></td>
                <td ng-bind="person.Name"></td>
                <td ng-bind="person.Age"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- /.col-lg-12 -->
    </div>
  </div>
</body>

</html>

＆＃13;

按表格纯

2 个答案: