如何在AngularJS UI Grid中使用Moment.js实现日期倒计时

嘿，我来帮你搞定这个AngularJS UI Grid的倒计时问题！你遇到的TypeError: moment(...).countdown is not a function报错，大概率是依赖加载顺序不对，或者代码里有小细节没处理好，咱们一步步来解决：

第一步：确保依赖加载顺序正确 #

moment-countdown是依赖moment.js和countdown.js的，所以必须按以下顺序引入脚本：

<script src="moment.js"></script>
<script src="countdown.js"></script>
<script src="moment-countdown.min.js"></script>

如果顺序搞反了，moment就不会挂载countdown方法，自然会报错。

第二步：修复你现有代码的错误 #

你在处理数据时犯了一个小错误：把字符串"row.MakerDueDate"传给了moment，而不是实际的变量值！另外，最好指定日期格式让moment准确解析，修改后的代码如下：

$http.get("xxx/json").then(function(response) { 
  response.data.forEach(function(row) { 
    // 去掉引号，传入实际的日期值，同时指定格式匹配你的短日期
    var dueDate = moment(row.MakerDueDate, "MM/DD/YYYY HH:mm");
    // 使用countdown计算剩余时间，指定只显示小时和分钟
    row.dueCountdown = countdown(null, dueDate.toDate(), countdown.HOURS | countdown.MINUTES).toString();
  }); 
  $scope.gridOptions.data = response.data; 

  // 关键：倒计时是动态的，需要定时刷新数据保持实时性
  $interval(function() {
    $scope.gridOptions.data.forEach(function(row) {
      var dueDate = moment(row.MakerDueDate, "MM/DD/YYYY HH:mm");
      row.dueCountdown = countdown(null, dueDate.toDate(), countdown.HOURS | countdown.MINUTES).toString();
    });
  }, 60000); // 每60秒刷新一次
});

然后修改UI Grid的列定义，直接显示处理后的倒计时字段：

{ field: 'dueCountdown', displayName: '剩余时间' }

更优雅的方式：自定义Angular过滤器 #

如果不想修改原始数据，推荐用自定义过滤器来处理，这样更符合Angular的设计理念：

1. 创建倒计时过滤器 #

angular.module('你的应用模块名').filter('dueCountdown', function() {
  return function(dateString) {
    var dueDate = moment(dateString, "MM/DD/YYYY HH:mm");
    // 处理已到期的情况
    if (dueDate.isBefore(moment())) {
      return '已到期';
    }
    // 返回格式化的倒计时文本
    return countdown(null, dueDate.toDate(), countdown.HOURS | countdown.MINUTES).toString();
  };
});

2. 在UI Grid中使用过滤器 #

直接在列定义的cellFilter里使用，同时为了实时更新，我们可以结合单元格模板和定时刷新：

{ 
  field: 'MakerDueDate', 
  displayName: '剩余时间',
  cellFilter: 'dueCountdown',
  // 可选：如果需要实时刷新，添加单元格模板并配合$interval刷新网格
  cellTemplate: '<div>{{row.entity.MakerDueDate | dueCountdown}}</div>'
}

如果要让倒计时实时跳动，可以在控制器里定时刷新UI Grid：

$interval(function() {
  $scope.gridOptions.api.core.refresh();
}, 60000);

常见问题排查 #

• 还是报错countdown不存在？ 检查脚本路径是否正确，有没有漏加载某个库，或者加载顺序是否正确。
• 倒计时显示不对？ 确认moment解析日期的格式和你的MakerDueDate格式完全匹配，比如如果是DD/MM/YYYY就改成对应格式。
• 倒计时不更新？ 必须定时刷新数据或网格，因为倒计时是动态变化的，Angular不会自动监听时间变化。

内容的提问来源于stack exchange，提问作者Anouar Ghali