AngularJs按列值将结果分成Divs

Question

我一直在努力弄清楚如何将我的结果显示到单独的 div 中，在这种情况下引导 col-md-4 的逻辑。它适用于我正在尝试构建的聊天消息应用程序。有房间和消息我希望每个房间只显示分组到 div 中的消息。

我的结果（$scope.messages）看起来像：

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"}
];

我想显示按 room_id 列分组的每个结果集，因此在重复数据时，该集看起来像这样

<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>

在尝试了其他几个选项后，我认为类似的方法可能会起作用，但它没有提供任何结果。

<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>

感谢您的帮助。

这对我有用，但您必须首先将模块过滤器添加为依赖项：

<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>

Answer 1

您可以使用groupBy 对结果进行分组：

(k, v) in messages | groupBy: 'room_id'

另一种解决方案是使用filter:

<div class="col-md-4" ng-repeat="data in messages | filter: '{'room_id': 2}'"> //show only items with room_id set to 2 and so on

</div>

但是，这种方法将是重复和冗余的。