如何在angularjs中自定义排序然后子排序？

Question

假设我有一个这样的对象数组：

[
        {
            name: 'test1',
            status: 'pending',
            date: 'Jan 17 2017 21:00:23'
        },
        {
            name: 'test2',
            status: 'pending',
            date: 'Jan 14 2017 21:00:23'
        },
        {
            name: 'test3',
            status: 'active',
            date: 'Jan 10 2017 21:00:23'
        }
    ];

我首先想根据“状态”对其进行排序，其中所有具有“待定”子状态的项目都应位于“活动”之前。 （我还有其他状态，所以 orderBy Name DESC 不起作用。）

稍后我想根据日期降序对它们进行子排序。

在我的 Angular 脚本中，我有一个变量定义为 sortField：

$scope.sortField = ['status', '-date']; 

（不起作用，因为 Active 在 Pending 之前排序）

我的 html 中有这个：

<li ng-repeat="form in forms | orderBy:sortField:isAsc " class="row {{Contextual}}" style="margin-bottom: 2px;">
    ...
</li>

我一直在尝试在线搜索，但找不到任何地方。您如何自定义排序一个字段“状态”并正常排序另一个字段“日期”？

Answer 1

orderBy 过滤器使用表达式来计算顺序。您可以将字符串或函数作为表达式传递。此外，您可以将数组作为表达式传递，并且您的数组可以包含字符串/函数谓词。

也就是说，您可以定义自定义排序函数并传入数组：

<li ng-repeat="form in forms | orderBy: [statusOrder, '-date']">

控制器：

$scope.statusOrder = function(item) {
   if (item.status === 'pending') {
     return 1; // smaller value means this should be placed first
   } else {
      return 2; // all other statuses not 'pending' should be returned as is
   }
}

编辑

关于日期顺序不正确，Angular 会按字母顺序对日期进行排序，因为日期是一个字符串。你有两个选择：

1. 更新您的数组源，使日期字符串成为日期对象。这在 $scope 方面的性能更高。

   angular.forEach($scope.array, function(item) { item.date = new Date(item.date) })

2. 像对状态所做的那样创建自定义 dateSort 函数。该函数应该只是return new Date(item.date)

更新的小提琴： https://jsfiddle.net/51bsbzL0/258/