0

我正在寻找完成以下任务的最佳方法（Angular 方式）：我有一个包含消息列表的数组，每条消息都包含作者姓名、文本和编写时间的时间戳。每条消息都绘制在一个表格中，但是消息可以堆叠在一起，因为：

  • 当前消息的作者与上一条相同
  • 前一个表格行的高度不超过给定的限制高度（即总可用高度的 40%）。

布局看起来像这样：

message = { author: 'x', message: 'Hello World', timeStamp: new Date() }

table
tbody
    tr( data-ng-repeat = 'message in conversation.messages | parseMessage')
        td.self
            div.messageAuthorProfile( style = 'background-image: url(/pictures/{{ message.author | parseAuthorEmail }}/profile/0.jpg)')
                div.conversation
                    label.messageAuthorName {{ message.author | parseAuthorName }}
                    div.message
                        div.conversationTimeStamp
                            span {{ message.timeStamp | parseTimeStamp }}
                        div.conversationMessage
                            p {{ message.message }}

这可以通过获取表的最后一个元素、检查其高度并在满足条件时附加消息来“轻松”实现，但是我正在努力在纯 Angular.js 解决方案中实现此功能。

谁能给我一些关于实现这一目标的可能方法的见解？

最好的问候和感谢您的阅读！

免责声明：我才开始使用 angular.js 大约一个星期，所以我目前正在通过移植几个基于 Angular 的 100% jquery 项目来学习，但是在研究和检查在线文档之后，我无法想出一个“干净的”实现这一目标的方式。

4

1 回答 1

0

考虑这一点的最佳方法是考虑如何使用数组数据执行此操作，然后让您的视图反映数据。

因此，如果我理解您的问题，您正在尝试按作者对行进行分组。
我倾向于使用 underscore.js 进行数组操作（这对它非常有用） http://underscorejs.org/#groupBy

它将按作者对您的数据进行分组。
然后在你的角度视图中，有 2 ng-repeats。外部 ng-repeat 用于您的组，内部用于消息和时间戳。
这将显示为每个作者列出的消息和时间戳。

于 2013-08-27T06:44:36.737 回答