orderBy date fllter angular

时间:2016-08-19 17:37:47

标签: javascript angularjs date angularjs-orderby

嗨,我是Angular的初学者。我在使用orderBy过滤器进行日期比较时遇到问题。问题是过滤器不考虑月份和年份。以下是代码段(也可在 fiddle 上找到)

SCRIPT

var list = [
  {
    name: 'Jon',
    joining_date:'23/10/2015', 
    age: 23
  }, {
    name:'Viki', 
    joining_date:'24/01/2015',
    age: 20
  }, {
    name: 'Abc',
    joining_date:'25/10/2015',
    age: 43
  }, {
    name: 'XYZ', 
    joining_date:'28/10/2015',
    age: 21
  }
];

var empApp = angular.module('emp-list', []);
empApp.controller('emp-table',function($scope){
    $scope.data = list;
})

HTML

<div ng-app="emp-list">
  <div class="search-box">
    <input type="text" ng-model="searchKeyword"></input>
  </div>
  <div ng-controller="emp-table">
    <table width="100%">
      <tr>
        <th width="33%">Name</th>
        <th width="33%">Joining Date</th>
        <th width="33%">Age</th>
      </tr>
      <tr ng-repeat="lists in data | filter: searchKeyword | orderBy : 'joining_date'">
         <td>{{lists.name}}</td>
         <td>{{lists.joining_date}}</td>
         <td>{{lists.age}}</td>
       </tr>
     </table>
  </div>
</div>

RESULT

Name    Joining Date    Age
Jon      23/10/2015     23
Viki     24/01/2015     20
Abc      25/10/2015     43
XYZ      28/10/2015     21

2 个答案:

答案 0 :(得分:1)

这是因为您的joining_date是字符串而不是Date对象。结果orderBy将它们作为字符串进行比较。以下是您的固定示例:https://jsfiddle.net/bocn0vrb/1/

您还可以使用自定义函数将这些字符串与某些投射进行比较。请查看文档页面:https://docs.angularjs.org/api/ng/filter/orderBy

答案 1 :(得分:0)

我还有一个解决方案而不更改我的json数据..请检查下面的代码。

我刚创建了一个以下函数,它将日期从字符串转换为日期格式

$scope.dateFormate = function(joinDate){
        return new Date(joinDate)
    }

<强> SCRIPT

var list = [{
                        name: 'Jon',
                        joining_date:'2015-10-23', 
                        age: 23
                    },
                    {
                        name:'Viki', 
                        joining_date:'2015-01-24',
                        age: 20
                    },
                    {
                        name: 'Abc',
                        joining_date:'2015-10-25',
                        age: 43
                    },
                    {
                        name: 'XYZ', 
                        joining_date:'2015-10-21',
                        age: 21
                }];


var empApp = angular.module('emp-list', []);
empApp.controller('emp-table',function($scope){
    $scope.data = list;

    $scope.dateFormate = function(joinDate){
        return new Date(joinDate)
    }
})