Angular中按日期范围（dd/MM/yyyy HH:mm格式）过滤ng-repeat列表

我来帮你解决这个AngularJS里ng-repeat列表的日期过滤问题！你遇到的核心问题其实是自定义日期格式的解析和过滤器的逻辑实现，咱们一步步来搞定：

第一步：先把自定义格式的日期转成可比较的Date对象 #

你的日期格式是dd-MM-yyyy HH:mm，Angular默认的日期处理工具没法直接识别这种格式，所以得先写个解析函数，把字符串转成JavaScript的Date对象——这样才能方便地比较时间范围。

在你的控制器里加个解析函数：

// 解析dd-MM-yyyy HH:mm为Date对象
$scope.parseCustomDate = function(dateStr) {
  // 拆分日期和时间部分
  const [datePart, timePart] = dateStr.split(' ');
  // 拆分日、月、年
  const [day, month, year] = datePart.split('-').map(Number);
  // 拆分时、分
  const [hour, minute] = timePart.split(':').map(Number);
  
  // 注意：JavaScript的Date月份是0开始的，所以要减1
  return new Date(year, month - 1, day, hour, minute);
};

第二步：写自定义日期范围过滤器 #

接下来咱们写一个自定义过滤器，接收你的列表、日期范围，还有刚才的解析函数，过滤出符合条件的项：

app.filter('dateRange', function() {
  return function(items, dateRange, parseDateFn) {
    // 如果没有数据或范围，直接返回原列表
    if (!items || !dateRange || !parseDateFn) return items;
    
    // 把开始/结束日期转成时间戳（毫秒数），方便比较
    const startMs = dateRange.start.getTime();
    const endMs = dateRange.end.getTime();
    
    // 过滤逻辑：只保留日期在范围内的项
    return items.filter(item => {
      const itemDate = parseDateFn(item.date);
      const itemMs = itemDate.getTime();
      // 这里可以根据需求调整是否包含边界（比如>=和<=改成>和<）
      return itemMs >= startMs && itemMs <= endMs;
    });
  };
});

第三步：在视图里使用过滤器 #

假设你已经在控制器里定义了要过滤的列表$scope.items，还有选中的日期范围$scope.selectedRange（比如从日期选择器绑定过来的Date对象），那视图里可以这么用：

<!-- 假设你有日期选择器绑定selectedRange的start和end -->
<input type="date" ng-model="selectedRange.start">
<input type="date" ng-model="selectedRange.end">

<!-- 过滤后的ng-repeat列表 -->
<div ng-repeat="item in items | dateRange:selectedRange:parseCustomDate">
  {{ item.name }} - {{ item.date }}
</div>

可选：用Moment.js简化日期解析 #

如果你的项目里已经用了Moment.js（或者愿意引入它），那日期解析会更简单，不用自己写拆分逻辑：

// 用Moment.js解析格式
$scope.parseCustomDate = function(dateStr) {
  return moment(dateStr, 'DD-MM-YYYY HH:mm').toDate();
};

这样过滤器的逻辑不用改，直接用就行。

一些注意事项 #

• 确保你的日期字符串格式完全统一，不能有dd/mm/yyyy或者dd-MM-yyyy hh:mm这种大小写、分隔符不一致的情况；
• 日期选择器返回的通常是Date对象（只包含年月日），如果需要精确到时分的范围，记得把结束日期的时间设为23:59:59，不然可能会漏掉当天晚些时候的项；
• 比较时间的时候用时间戳（getTime()）比直接比较Date对象更可靠，避免时区问题。

内容的提问来源于stack exchange，提问作者Jake Wansink