这类似于 iPhone 上的消息应用程序，您收到的较新短信只会以 9:55 PM 等格式显示时间，但一旦过了一天，它就会显示时间。表示昨天，任何早于一天的内容都表示该周的某一天星期一、星期二等，任何早于该周的内容都会显示该日期日期如 12/22/2014。
我已经能够使用日期过滤器成功设置时间戳的格式:
{{message.timestamp | date:"h:mm a" }}
什么最适合这样的事情，自定义过滤器？纯粹有 Angular 吗？
最佳答案
您可以使用moment.js带有 Angular 过滤器的日期库来实现这一点。 moment 有各种可用的标准格式表达式。看看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();
}
}]);
将过滤器与绑定(bind)一起使用:
{{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>关于javascript - 使用 Angular 根据对象的年龄显示不同的时间戳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28035546/