繁体   English   中英

AngularJS 中的自定义排序

[英]Custom sort in AngularJS

我需要对看起来像这样的对象进行排序:

{id: x, startDate:"mm/yyyy", endDate:"mm/yyyy", title:"xxxx", ...}
{id: y, startDate:"mm/yyyy", endDate:"", title:"xxxx", ...}

我希望使用endDate (最近结束的最先)对对象进行排序。 结束日期也可以为空,在这种情况下,对象仍处于活动状态并且需要位于顶部。 如果结束日期相同,则应按开始日期排序,最近的排在最前面。

我不能做简单的字符串比较,因为 10/2013 比 02/2010 更新。 所以比较应该在开始和结束日期以及年( date.substring(3,7) )和月( date.substring(0,2) )上工作。

编辑

在我看来,有以下几点:

ng-repeat="project in ProfileController.person.projects|orderBy:dateSorter"

在我的控制器中:

$scope.dateSorter = function(project) {
    return project.endDate.length ? -"9999" : -project.endDate.substring(3,7);
};

按 end year降序正确对项目进行排序。 现在我需要考虑月份,以及在结束日期相等的情况下的开始日期。

工作Plunker: http ://plnkr.co/edit/fXEzU8s8huS0HGFPDEnI?p=preview

HTML:

<table class="friend">
    <tr>
      <th>Id</th>
      <th><a href="" ng-click="order('startDate', reverse); reverse=!reverse">Start Date</a></th>
      <th><a href="" ng-click="order('endDate',reverse);reverse=!reverse">End Date</a></th>
      <th>Title</th>  
    </tr>
    <tr ng-repeat="item in items"> 
      <td>{{item.id}}</td>
      <td>{{item.startDate | date:'MM-yyyy'}}</td> 
      <td>{{item.endDate }}</td>
      <td>{{item.title }}</td>
    </tr>
  </table>

JavaScript:

angular.module('myApp', [])
.controller('MyController', function($scope,$filter){      
   var orderBy = $filter('orderBy');         
   $scope.items = [
                  {id: 1, startDate:"02/2010", endDate:"02/2010", title:"Title1"},
                  {id: 2, startDate:"01/2010", endDate:"01/2010", title:"Title2"};
                 ];                  
   $scope.order = function(predicate, reverse) {
       $scope.items = orderBy($scope.items, predicate, reverse);
   };

});

您可以为 Array.prototype.sort() 提供一个比较函数。 您应该为它提供一个实现您的订购规范的函数,如下所示:

function mmYyyyToDate(mmYyyy) {
    return new Date(mmYyyy.substring(3,7), mmYyyy.substring(0, 2))
}

function compares(a, b) {
    if (a.endDate && b.endDate) {
        var aEndDate = mmYyyyToDate(a.endDate);
        var bEndDate = mmYyyyToDate(b.endDate);
        return aEndDate == bEndDate ? 0 : aEndDate < bEndDate ? -1 : 1
    } else if (a.endDate) { return -1; }
    } else if (b.endDate { return 1; }
    } else {
        var aStartDate = mmYyyyToDate(a.startDate);
        var bStartDate = mmYyyyToDate(b.startDate);
        return aStartDate == bStartDate ? 0 : aStartDate < bStartDate ? -1 : 1;
    }
}

如果您需要对数组进行排序以进行显示,您可以在过滤器中实现它,或者如果您希望始终对数据进行排序,则只需在控制器中调用它或提供服务。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM