我有一个包含多个会话的数组，每个消息都由用户或管理员输入一个时间戳，指示消息的发送时间。对话可以在同一天结束，也可以在开始后的一天或一周，一个月甚至一年后继续。
我想在页面上显示当天（例如：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>
我被困住了。任何帮助将不胜感激。
答案 0 :(得分：1)
我创建了一个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')">
答案 1 :(得分：0)
我要做的是制作一个范围变量，可能是：$scope.lastMsg。然后，每次添加新的msg时，将其时间存储在上述变量中。使用此变量，您可以以您喜欢的方式使用表达式。我每天都没有真正理解你的意思。它是否意味着每天都在固定的时刻？最简单的方法是在同一个控制器中完成所有这些操作。