使用 angular 根据对象的年龄显示不同的时间戳

Question

这类似于 iphone 上的消息应用程序，您收到的较新的短信只会以 9:55 PM 之类的格式向您显示时间，但一旦它们是一天前的表示 Yesterday，超过一天的任何内容表示该周的第几天 Monday、Tuesday，等等，任何超过该周的内容只显示 12/22/2014 之类的日期。

我已经能够使用日期过滤器成功地格式化我的时间戳：

{{message.timestamp | date:"h:mm a" }}

什么最适合这样的自定义过滤器？是否可以纯粹在 angular?

Answer 1

您可以使用 moment.js date library with angular filter to achieve that. moment has various standard formatting expressions available. Take a look at the documentation.

在您的应用中包含moment.js，您可以下载它或参考cdn 位置。示例：

//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js

创建过滤器：

.constant('moment', window.moment) //Save moment in constant for ease of dependency injection
.filter('dateMoment', ['moment', function(moment){
  return function(input){
    //Return formatted date
    if(!input) return '_';
    return moment(input).calendar();
  }
}]);

将过滤器与绑定一起使用：

{{message.timestamp | dateMoment }}

演示

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

app.controller('MainCtrl', function($scope, moment) {
  var currDt = new Date();
  $scope.messages = [{
    message: 'message1',
    date: currDt
  }, {
    message: 'message11',
    date: (new Date(currDt)).setDate(currDt.getDate()-1)
  }, {
    message: 'message3',
    date: (new Date(currDt)).setDate(currDt.getDate()-3)
  }, {
    message: 'message4',
    date: (new Date(currDt)).setDate(currDt.getDate()-4)
  }, {
    message: 'message5',
    date: (new Date(currDt)).setDate(currDt.getDate()-5)
  }, {
    message: 'message2',
    date: (new Date(currDt)).setDate(currDt.getDate()-30)
  }]
}).constant('moment', moment).filter('dateMoment', ['moment',
  function(moment) {
    return function(input) {
      return moment(input).calendar();
    }
  }
]);

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="moment.js@*" data-semver="2.8.3" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="msg in messages">{{msg.message}} ---- {{msg.date|dateMoment}}</div>
</body>

</html>

使用 angular 根据对象的年龄显示不同的时间戳

Using angular to display different timestamps depending on age of object

javascript

angularjs

angularjs-filter