angularjs orderBy 具有多种功能，如何反转？

Question

我有一个 ng-repeat 迭代一组对象，这些对象需要一些函数来提取我想要排序的值。

我的 ng-repeat 看起来像这样:

ng-repeat="row in rows | orderBy: [sortFnOne, sortFnTwo, ...]"

我遇到的问题是，我希望 sortFnOne 被反转。这些正在提取我无法使用简单属性访问的字符串，因为它正在对数据进行一些转换以生成我尝试排序的这些值。

如果这很简单，我知道我会这样做:

ng-repeat="row in rows | orderBy: ['-id', 'name', '-status', ...]"

如果这些函数只是返回 bool 值，我可以!返回值以获得我想要的结果，但其中一些返回字符串，一些返回 YYYY-MM-DD 格式的日期。

Answer 1

我自己也遇到过这个限制……没有办法用 orderBy 反转函数完成的排序。筛选。

据我所知，没有简单的方法可以在原生 JavaScript API 中重现这种带方向的复合排序(按“A”升序，然后按“B”降序排列)。
Array.prototype.sort通过比较函数提供基本排序(详见 MDN docs)，但如果不编写另一个比较函数，就无法轻松切换排序顺序(反向)，并且没有提供复合排序的解决方案。我们需要的是一个紧凑的符号来指定多个排序的方向和优先级。

我前段时间写了这个助手来帮助解决这个问题。

  var orderByAgeThenName = new OrderByBuilder().asc(getAge).asc(getName).build();
  var friendsByAgeThenName = orderByAgeThenName(friends);

  var orderByNameThenAge = new OrderByBuilder().desc(getName).asc(getAge).build();
  var friendsByNameThenAge = orderByNameThenAge(friends);

这不是一个 Angular 过滤器，所以只需将它包装在一个 Controller 方法中并从您的模板中调用它。或者，只需将排序应用于 Controller 内的数组。

我想这可以适应 Angular 过滤器......

可运行示例:

angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  var friends =
    [{name:'Jon', phone:'555-1212', age:10},
     {name:'Zach', phone:'555-2276', age:7},                     
     {name:'Zach', phone:'555-9876', age:19},
     {name:'Zach', phone:'555-9276', age:13},           
     {name:'Mike', phone:'555-4321', age:21},
     {name:'Adam', phone:'555-5678', age:35},
     {name:'Julie', phone:'555-8765', age:29}];

  function getName(f){
    return f.name;
  }

  function getAge(f){
    return f.age;
  }
  
  var orderByName       = new OrderByBuilder().desc(getName).build();
  var orderByNameAndAge = new OrderByBuilder().desc(getName).asc(getAge).build();

  $scope.friendLists = [
    {label:'Not Ordered', friends: friends},
    {label:'Name DESC', friends: orderByName(friends)},
    {label:'Name DESC, Age ASC', friends: orderByNameAndAge(friends)}
  ];
  
}]);




function OrderByBuilder(orderings){
  var _orderings = [];

  return {
    asc: function(fn){
      addOrdering(true,fn);
      return this;
    },
    desc: function(fn){
      addOrdering(false,fn);
      return this;
    },
    build: build
  };

  function addOrdering(asc,fn){
    _orderings.push({
      getterFn: fn,
      asc: asc
    });
    return this;
  }

  function build(){
    var compare = _orderings.reverse().reduce(function(nextComparer, ordering){
      return getComparerFn(ordering, nextComparer);
    },null);

    return function(xs){
      return xs.slice().sort(compare);
    };
  }

  // a comparerFn has the following signature:
  //		function(a: obj, b: obj): int

  function getComparerFn(ordering, nextComparer){
    var next = nextComparer || function(a,b){ return 0; };
    var getVal = ordering.getterFn;

    return function(a,b){
      var aVal = getVal(a);
      var bVal = getVal(b);
      if(aVal < bVal){ return ordering.asc ? -1 :  1; }
      if(aVal > bVal){ return ordering.asc ?  1 : -1; }
      return next(a,b);
    };
  }
}

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div ng-app="orderByExample">
  <div ng-controller="ExampleController">
    <div class="row">
      <div ng-repeat="friendList in friendLists" class="col-sm-4">
        <h4>{{friendList.label}}</h4>
        
        <table class="table table-bordered table-condensed">
          <tr>
            <th>Name</th>
            <th>Phone Number</th>
            <th>Age</th>
          </tr>
          <tr ng-repeat="friend in friendList.friends">
            <td>{{friend.name}}</td>
            <td>{{friend.phone}}</td>
            <td>{{friend.age}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>