我有一个包含多个对话的数组，并且用户或管理员输入的每条消息都有一个时间戳，指示消息发送的时间。对话可以在同一天结束，也可以在开始后的第二天或一周、一个月甚至一年后继续。
我想在页面上显示日期(例如:2015 年 5 月 7 日)，表明对话从今天开始。如果稍后再进行对话，我想显示当天的日期(例如:2015 年 5 月 8 日)。
我正在使用 AngularJS，并且我搜索了聊天应用程序或类似应用程序的示例，但我没有找到好的示例，也没有找到教程。
她是我的对话数组:
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>
我被困住了。任何帮助将不胜感激。
最佳答案
我创建了一个 plunkr我认为这就是你想要的。
您需要跟踪重复中消息的索引
<div class="{{ message.animationClass }}"
ng-repeat="message in conversation.Messages track by $index">
然后将当前消息的日期与前一条消息的日期进行比较，仅在不同时显示日期。
<!-- DATE -->
<div class="row"
ng-show="$index == 0 ||
(message.time | date: 'dd MMMM yyyy') !=
(conversation.Messages[$index-1].time | date: 'dd MMMM yyyy')">
关于javascript - 如何从具有多个时间戳的数组中每天显示一次日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30097198/