问题
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.
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).
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
} ]
}
];
Here is the 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.
回答1:
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')">
回答2:
What I'd do is make a scoped variable, maybe something like: $scope.lastMsg. Then everytime a new msg has been added, store its time in the aforementioned variable. with this variable you can use an expression in a way you prefer. I don't really get what you mean by once per day. Is it meant to be on a fixed moment each day? The easiest would be to do all of this in the same controller.
来源：https://stackoverflow.com/questions/30097198/how-to-show-date-once-per-day-from-an-array-with-multiple-timestamps