如何过滤角度NG-重复使用的日期范围？ [英] How do I filter angular ng-repeat to use ranges of dates?

问题描述

所以我使用的NG-重复列出有关的事件，其中之一是日期字段的一些信息。我想过滤的日期，例如，能够显示事件接下来的30天。我不知道采取什么样的方向做到这一点。

 ＆LT;表＆gt;
＆所述; TR＆GT;
    ＆LT;第i个标题＆LT; /第i
    ＆LT;第i说明＆LT; /第i
    ＆LT;第i个开始时间与LT; /第i
＆LT; / TR＆GT;
＆LT; TR NG重复=EVENTDATA在eventListData |排序依据：'+的startDateTime'＆GT;
  ＆所述; TD＆GT; {{eventData.Title}}＆下; / TD＆GT;
  ＆所述; TD＆GT; {{eventData.Description}}＆下; / TD＆GT;
  ＆LT; TD＆GT; {{eventData.StartDateTime |日期：倒是MMM YYYY}}＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
 

解决方案

首先，排序依据的语法是错误的。它应该是排序依据：'+的startDateTime'，其中+/-控制递增/递减的方向，和'的startDateTime（记单引号）是掐领域

使用起始日期为功放和时间戳;做>现在 - ＆LT; NOW +30天，然后你有2个选择：

• 过滤模式阵列它得到您的视图之前


• 请对角和放一个过滤器;使用它

我喜欢第二个选项好，我觉得它有角的精神更好地配合，并允许更多的动态与数据搞乱。我做了一个例子这里

  VAR应用= angular.module（'应用'，[]）;//滤波器阵列由@field {}字符串
//从现在开始返回从今天项目@days {}数
//例如：活动|即将到来的：的startDateTime'：30
app.filter（'即将'，函数（）{
  返回功能（项目现场，天）{
    变种timeStart = Date.now（）;
    VAR timeEnd = Date.now（）+（天* 86400000）; // 1天毫秒
    返回items.filter（函数（项目）{
      收益率（项目[现场]＆GT; timeStart和放大器;＆放大器;项目[现场]＆LT; timeEnd）;
    }）;
  };
}）;app.controller（'CTRL'，函数（$范围）{
  //演示数据，的startDateTime应该在你的数据编号
  $ scope.eventListData = [
   {
     标题：'事件1（去年30 DYS），
     说明：一个很酷的事件，
     的startDateTime：Date.now（）+（86400000 * 5）// 5天
   }，
   {
     标题：'事件2（下），
     说明：一个很酷的事件，
     的startDateTime：Date.now（）+ 86400000 //在一天
   }，
   {
     标题：'事件3（Next下一步），
     说明：一个很酷的事件，
     的startDateTime：Date.now（）+（86400000 * 2）// 2天
   }，
   {
     标题：太遥远的事件，
     说明：一个很酷的事件，
     的startDateTime：Date.now（）+（86400000 * 40）// 40天
   }，
   {
     标题：已经-happend事件'，
     说明：一个很酷的事件，
     的startDateTime：Date.now（） - （86400000 * 2）// 2天前
   }
  ];
}）;
 

和这里是HTML：

 ＆LT; HTML NG-应用=应用程序＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset = UTF-8 /＆GT;
＆LT;标题＆GT;角日期过滤器＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=CTRL＆GT;
＆LT;表＆gt;
＆所述; TR＆GT;
    ＆LT;第i个标题＆LT; /第i
    ＆LT;第i说明＆LT; /第i
    ＆LT;第i个开始时间与LT; /第i
＆LT; / TR＆GT;
＆LT; TR NG重复=EVENTDATA在eventListData |即将到来：的startDateTime'：30 |排序依据：'+的startDateTime'＆GT;
  ＆所述; TD＆GT; {{eventData.Title}}＆下; / TD＆GT;
  ＆所述; TD＆GT; {{eventData.Description}}＆下; / TD＆GT;
  ＆LT; TD＆GT; {{eventData.StartDateTime |日期：倒是MMM YYYY}}＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /身体GT;
＆LT; / HTML＆GT;
 

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 accomplish 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>

解决方案

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>

这篇关于如何过滤角度NG-重复使用的日期范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！