admin管理员组

文章数量:1315258

So I am using ng-repeat to list some information about an event, one of which is a date field. I would like to filter the dates, for example, be able to show events in the next 30 days. I am not sure what direction to take to acplish this. 

<table>
<tr>
    <th>Title</th>
    <th>Description</th>
    <th>Start Time</th>
</tr>
<tr ng-repeat="eventData in eventListData  | orderBy:'+StartDateTime'">
  <td>{{eventData.Title}}</td>
  <td>{{eventData.Description}}</td>
  <td>{{eventData.StartDateTime|date:'d MMM yyyy'}}</td>
</tr>
</table>

So I am using ng-repeat to list some information about an event, one of which is a date field. I would like to filter the dates, for example, be able to show events in the next 30 days. I am not sure what direction to take to acplish this. 

<table>
<tr>
    <th>Title</th>
    <th>Description</th>
    <th>Start Time</th>
</tr>
<tr ng-repeat="eventData in eventListData  | orderBy:'+StartDateTime'">
  <td>{{eventData.Title}}</td>
  <td>{{eventData.Description}}</td>
  <td>{{eventData.StartDateTime|date:'d MMM yyyy'}}</td>
</tr>
</table>
  • javascript
  • angularjs
Share Improve this question edited Jul 8, 2014 at 23:39 user3648646 asked Jul 8, 2014 at 22:23 user3648646user3648646 7112 gold badges16 silver badges24 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

First, the syntax for orderBy is wrong. It should be "orderBy:'+StartDateTime'" where +/- controls asc/desc direction, and 'StartDateTime' (mind single-quotes) is the field to pluck from.

Use timestamps for StartDate & do > now - < now + 30days, and then you have 2 options:

  • Filter model array before it gets to your view
  • Make a filter for angular & use it

I like the second option better, and I feel like it better fits with the spirit of angular, and allows more dynamic messing with the data. I made an example here

var app = angular.module('app', []);

// filter array by @field {String}
// return items from today to @days {Number} from now
// eg: events | upComing:'StartDateTime':30
app.filter('upComing', function(){
  return function(items, field, days){
    var timeStart = Date.now();
    var timeEnd = Date.now() + (days * 86400000); // 1 day in ms
    return items.filter(function(item){
      return (item[field] > timeStart && item[field] < timeEnd);
    });
  };
});

app.controller('ctrl', function($scope){
  // demo data, StartDateTime should be numbers in your data
  $scope.eventListData = [
   {
     Title:'Event 1 (last in 30 dys)',
     Description:'A cool Event',
     StartDateTime: Date.now() + (86400000 * 5) // in 5 days
   },
   {
     Title:'Event 2 (next)',
     Description:'A cool Event',
     StartDateTime: Date.now() + 86400000 // in a day
   },
   {
     Title:'Event 3 (next next)',
     Description:'A cool Event',
     StartDateTime: Date.now() + (86400000 * 2) // in 2 days
   },
   {
     Title:'Too-far-away Event',
     Description:'A cool Event',
     StartDateTime: Date.now() + (86400000 * 40) //  in 40 days
   },
   {
     Title:'Already-happend Event',
     Description:'A cool Event',
     StartDateTime: Date.now() - (86400000 * 2) //  2 days ago
   }
  ];
});

and here is the HTML:

<html ng-app="app">
<head>
<meta charset=utf-8 />
<title>Angular Date Filter</title>
</head>
<body ng-controller="ctrl">
<table>
<tr>
    <th>Title</th>
    <th>Description</th>
    <th>Start Time</th>
</tr>
<tr ng-repeat="eventData in eventListData  | upComing:'StartDateTime':30 | orderBy:'+StartDateTime'">
  <td>{{eventData.Title}}</td>
  <td>{{eventData.Description}}</td>
  <td>{{eventData.StartDateTime|date:'d MMM yyyy'}}</td>
</tr>
</table>
</body>
</html>

本文标签： javascriptHow do I filter angular ngrepeat to use ranges of datesStack Overflow

版权声明：本文标题：javascript - How do I filter angular ng-repeat to use ranges of dates? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741964999a2407497.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。