如何每天从具有多个时间戳的数组中显示日期一次 [英] How to show date once per day from an array with multiple timestamps
本文介绍了如何每天从具有多个时间戳的数组中显示日期一次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含多个对话的数组，每条由用户或管理员键入的消息都有一个时间戳，指示该消息的发送时间.对话可以在同一天结束，也可以在对话开始的第二天或一周，一个月甚至一年之后继续.
I have an array with multiple conversations and with every message that has been typed either by the user or by the admin a timestamp indicating at what time the message was sent. A conversation can end on the same day or it can continue the day after it was started or a week, month even a year later.
我想在页面上显示日期(例如:2015年5月7日)，以表明对话今天开始.如果以后再进行对话，我想显示当天的日期(例如:2015年5月8日).
I want to show the day (example: 7 MAY 2015) on the page indicating that the conversation is started today. And if the conversation is picked up on a later date i want to show that date of the day (example: 8 MAY 2015).
我正在使用AngularJS，并且已经搜索了聊天应用程序或类似应用程序的示例，但是我没有找到好的示例，也没有找到教程.
I am using AngularJS and I have search for a example of a chat application or similar but I have not found a good example nor have I found a tutorial.
她是我与对话的共同点:
Her is my array with the conversations:
conversationList.conversations = [
{
ConversationID: 1,
Person : {
name : "Bobi Ristov",
email : "bobby.ristov@socialdeal.nl",
image : "/img/bobi.png",
phone : "06 - 12345678"
},
Messages : [ {
text : "Ik heb een vraag",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257762800
},
{
text : "Wat is je vraag?",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429257942900
},
{
text : "Hoe kun je een deal kopen?",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "Door middel op de 'Koop nu' knop te drukken",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429259943100
},
{
text : "Ik heb een vraag",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257762800
},
{
text : "Wat is je vraag?",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429257942900
},
{
text : "Hoe kun je een deal kopen?",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "Door middel op de 'Koop nu' knop te drukken",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429259943100
},
{
text : "Ik heb een vraag",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257762800
},
{
text : "Wat is je vraag?",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429257942900
},
{
text : "Hoe kun je een deal kopen?",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "Door middel op de 'Koop nu' knop te drukken",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429259943100
},
{
text : "Ik heb een vraag",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257762800
},
{
text : "Wat is je vraag?",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429257942900
},
{
text : "Hoe kun je een deal kopen?",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "Door middel op de 'Koop nu' knop te drukken",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429259943100
},
{
text : "Ik heb een vraag",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257762800
},
{
text : "Wat is je vraag?",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429257942900
},
{
text : "Hoe kun je een deal kopen?",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "Door middel op de 'Koop nu' knop te drukken",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429259943100
},{
text : "Ik heb een vraag",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257762800
},
{
text : "Wat is je vraag?",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429257942900
},
{
text : "Hoe kun je een deal kopen?",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "Door middel op de 'Koop nu' knop te drukken",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429259943100
},{
text : "Ik heb een vraag",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257762800
},
{
text : "Wat is je vraag?",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429257942900
},
{
text : "Hoe kun je een deal kopen?",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "Door middel op de 'Koop nu' knop te drukken",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429259943100
},{
text : "Ik heb een vraag",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257762800
},
{
text : "Wat is je vraag?",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1429257942900
},
{
text : "Hoe kun je een deal kopen?",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "Door middel op de 'Koop nu' knop te drukken",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1430745187000
} ]
},
{
ConversationID: 2,
Person : {
name : "Rene Jaspers",
email : "rene@socialdeal.nl",
image : "/img/rene.png",
phone : "06 - 87654321"
}
,
Messages : [ {
text : "This is a second user message",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257762500
},
{
text : "This is a second admin message",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1430655187000
} ]
},
{
ConversationID: 3,
Person : {
name : "Jafeth van Gorp",
email : "jafeth@socialdeal.nl",
image : "/img/jafeth.png",
phone : "06 - 12348765"
}
,
Messages : [ {
text : "This is a third user message",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "This is a third admin message",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1430565187000
} ]
},
{
ConversationID: 4,
Person : {
name : "Peter Covers",
email : "peter@socialdeal.nl",
image : "/img/peter.png",
phone : "06 - 87654321"
}
,
Messages : [ {
text : "This is a fourth user message",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "This is a fourth admin message",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1430475187000
} ]
},
{
ConversationID: 5,
Person : {
name : "John Doe",
email : "john@doe.com",
image : "http://s3.amazonaws.com/overlayer/photo/imgs/original/GToGIYGDmaKZPxBrCREVvwVT.png?1354821570",
phone : "06 - 87654321"
}
,
Messages : [ {
text : "This is a fourth user message",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "This is a fourth admin message",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1430385187000
} ]
},
{
ConversationID: 6,
Person : {
name : "Jane Doe",
email : "jane@doe.com",
image : "http://motherscircle.net/wp-content/uploads/2012/12/smiling-woman-in-glasses.jpg",
phone : "06 - 87654321"
}
,
Messages : [ {
text : "This is a fourth user message",
messageClass : "user-message",
animationClass: "user-reply",
time : 1429257763000
},
{
text : "This is a fourth admin message",
messageClass : "admin-message pull-right",
animationClass: "reply",
time : 1427879587000
} ]
}
];
这是HTML:
<div sd-slimscroll sd-height="auto" sd-color="#878787" sd-always-visible="true" sd-size="5px" class="conversation-container">
<!-- WHOLE MESSAGE FROM USER/ADMIN (INCLUDING DATE) -->
<div class="{{ message.animationClass }}" ng-repeat="message in conversation.Messages">
<!-- DATE -->
<div class="row">
<div class="col-lg-12">
<div class="date text-center">
{{ message.time | date: "dd MMMM yyyy" }}
</div>
</div>
</div>
<!-- WHAT THE USER/ADMIN HAS TYPED -->
<div class="row">
<div class="col-lg-12">
<div class="media {{ message.messageClass }}">
<div class="media-body">
<h5 class="media-heading">{{conversation.Person.name}}</h5>
{{ message.text }} <img class="img-responsive" ng-show="message.imageURL" src="{{ message.imageURL }}"/><br />
<div class="message-time">{{ message.time | date: "HH:mm" }}</div>
</div>
</div>
</div>
</div>
</div>
我被困住了.任何帮助将不胜感激.
I am stuck. Any help would be appreciated.
推荐答案
我创建了 plunkr 可以满足您的要求.
I've created a plunkr which does what I think you want.
您需要在重复中跟踪邮件的索引
You need to track the index of the message in the repeat
<div class="{{ message.animationClass }}"
ng-repeat="message in conversation.Messages track by $index">
，然后将当前消息的日期与上一条消息的日期进行比较，如果不同则仅显示日期.
and then compare the date of current message with the date of previous one, only showing date if it's different.
<!-- DATE -->
<div class="row"
ng-show="$index == 0 ||
(message.time | date: 'dd MMMM yyyy') !=
(conversation.Messages[$index-1].time | date: 'dd MMMM yyyy')">
这篇关于如何每天从具有多个时间戳的数组中显示日期一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
