Question

在这种情况下，我一直在努力弄清楚如何将结果显示到单独的div中的逻辑bootstrap 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>

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

AngularJs按列值

1 个答案: