Struggling with the user-to-user messaging interface on an app and having difficulty using ng-repeat on the items.
Here is the provided data:
{
"ID": 4118,
"CreatedDate": "2015-08-20T03:12:50.397",
"recipient": [
{
"ID": 13,
"FirstName": "Heather",
"LastName": "Martin",
"ProfileImage": "https://../profilepictures/13"
}
],
"sender": [
{
"ID": 1046,
"FirstName": "Brad",
"LastName": "Martin",
"ProfileImage": "https://../profilepictures/1046"
}
],
"messages": [
{
"ID": 4137,
"ConversationID": 4118,
"UserID": 1046,
"Body": "hey",
"CreatedDate": "2015-08-20T14:34:42.4716233+00:00"
}
]
}
The goal is to display one <li> element per message in a very simple layout.
$scope.convo = JSON.parse(localStorage.getItem("convo-" + $stateParams.chatId));
Desired structure for displaying messages:
<ul>
<li class="item-avatar-left" ng-repeat="c in convo track by $index">
<img ng-src="{{c.recipient[0].ProfileImage}}" />
<p class="bubble speech">
{{c.messages[0].Body}}
</p>
</li>
</ul>
Various attempts at using the ng-repeat directive have been made.
Ideally, each message should be displayed as a separate list item (<li>).
Current result: https://i.stack.imgur.com/3dSJN.jpg
Console output of a conversation from LocalStorage: https://i.stack.imgur.com/OHjH2.jpg