I've been racking my brain trying to figure out the best way to organize and display my results in separate divs, specifically using Bootstrap col-md-4's. This is for a chat messaging app that I'm in the process of developing. I have rooms and messages, and I want each room to only display its messages grouped together in divs.
The structure of my results ($scope.messages) is as follows:
messages = [
{"room_id":1,"message_id":2,"message_content":"hiiii","message_time":"2015-11-28 23:22:57","user_name":"Aaaa1aa"},
{"room_id":1,"message_id":1,"message_content":"hi there","message_time":"2015-11-28 23:22:40","user_name":"aaaa2aa"},
{"room_id":2,"message_id":3,"message_content":"hyyy","message_time":"2015-11-28 23:23:07","user_name":"Guest"},
{"room_id":2,"message_id":4,"message_content":"aaaaa","message_time":"2015-11-28 23:23:20","user_name":"aaaa2aa"}
];
I aim to display each set of results grouped by the room_id column so that the output looks like this when looping through the data:
<div class="col-md-4"> Room Id - 1
aaaa2aa - hi there
Aaaa1aa - hiiii
</div>
<div class="col-md-4"> Room Id - 2
Guest - hyyy
aaaa2aa - aaaaa
</div>
After trying various approaches, I attempted the following code snippet, but unfortunately, it did not yield any results.
<div class="col-md-4" ng-repeat="data in messages">
<div ng-repeat="data in data[$index]">
{{data.user_name}}
{{data.message_content}}
</div>
</div>
Any help would be greatly appreciated.
Here is what finally worked for me, but please note that you need to include the module filter as a dependency first:
<div class="col-md-4" ng-repeat="data in messages | groupBy: 'room_id'">
{{data[$index].room_id}}
<div ng-repeat="data in data">
{{data.user_name}}
{{data.message_content}}
</div>
</div>