Here is a representation of my layout in HTML:
<div ng-repeat="message in messages">
<div ng-class="{'messages messages--sent': userId == message.id,
'messages messages--received': userId != message.id}">
<div class="message">
{{message.content}}
</div>
</div>
</div>
This is how the messages array is structured:
$scope.messages = [
{
"id":"Michael",
"content":"Hey"
},
{
"id":"Rich",
"content":"Yow"
},
{
"id":"Rich",
"content":"How are you"
},
{
"id":"Michael",
"content":"Im okay"
},
{
"id":"Michael",
"content":"Im missed you!"
},
];
This is the desired layout I'm aiming for
The previous layout is styled with the following CSS code:
.messages--received .message:first-child {
border-top-left-radius: 50px;
}
// More CSS styling...
.messages--sent .message:last-child {
border-bottom-right-radius: 50px;
margin-bottom: 10px;
}
However, this is the issue that arises
The problem lies in the creation of a new div during each loop of ng-repeat, which I do not want. I aim to append the next {{message.content}} to the previously created div if their {{message.id}} matches.
If they do not match, a new div should be created as usual. Your assistance on this matter would be greatly appreciated. Thank you :)
Note: I prefer not to filter and group everything as I have tried before but faced misunderstandings. Hence, I have provided images this time to facilitate better comprehension. THANK YOU ^_^