Question

我最近得到了一个关于如何按照我从<select>下拉菜单中选择的单个字段进行排序的答案。

HTML ：

<body ng-controller="AppCtrl">
  Sort by: <select ng-model="sortField" ng-options="o.label for o in fields"></select>

  <label>
    <input type="checkbox" ng-model="inverse"> inverse
  </label>

  <hr>

  <table>
    <tr data-ng-repeat="row in grid.data|orderBy:sortField.key:inverse">
      <td>{{row.id}}</td>
      <td>{{row.number}}</td>
      <td>{{row.text}}</td>
    </tr>
  </table>
</body>

JS ：

app.controller('AppCtrl', ['$scope', function($scope) {
  $scope.fields = [
    { label: 'ID',   key: 'id' },
    { label: 'Nr.',  key: 'number' },
    { label: 'Text', key: 'text' }
  ];

  $scope.sortField = $scope.fields[2];
  $scope.inverse = false;

  $scope.grid = {
    data: [
      { id: 1, number: 4, text: 'A' },
      { id: 2, number: 3, text: 'E' },
      { id: 3, number: 2, text: 'B' },
      { id: 4, number: 1, text: 'D' },
      { id: 5, number: 0, text: 'C' }
    ]
  };
}]);

演示：http://jsbin.com/ezadat/1/

这很好用，但现在我想允许按多个字段排序。例如，在这种情况下，“数字”然后是“文本”字段。

有没有人尝试过如何解决这个问题？如果是这样，我会感谢他们给我的任何建议。

Answer 1

您可以尝试连接要排序的字段，然后使它们不可见 - 这样您就有了一个不可见的排序键。

Answer 2

如果您希望AngularJS首先对 number 进行排序，然后 text ，则可以通过以下方式向fields添加另一个条目：

{ label: 'Number - Text', key: ['number', 'text'] }

orderBy表达式可以是数组：

Array：函数或字符串谓词的数组。第一个谓词在数组中用于排序，但当两个项目相同时，使用下一个谓词。

按照从<select> </select>中选择的多个字段进行排序

2 个答案: