ng-repeat中的AngularJS"标题"

Question

我有一个问题,最近出现的情况多于一个,我想知道最好的办法.简单说明一下:

我将数据显示在ng-repeat中,按特定项目排序.比如说它按名称排序.我的目标是在字母顺序列表中的字母中断标题:

----A----
Abe Lincoln
Adam Smith
----B----
Barack Obama
Barry Zuckercorn
----C----
...

等等.

我尝试过的事情包括:

让控制器完全重新构建模型的数据,手动将其放入一组字母组中.例如,我的服务有一系列"帖子",我的控制器,当服务更新时,手动将这些"帖子"洗牌成"letterGroups"数组.然后可能只有两个嵌套的ng-repeats

但是,这依赖于对数据的大量操作,并且不容易改变数据的动态排序.

当模型更新时,让控制器通过手动单步执行数据来"填充"数据,检查字母何时更改,并捎带该元素上的"标题"属性(post.header = true).然后ng-repeat可以检查它当前所在的元素是否是标题,并使用ng-if将其他内容插入到DOM中.

这感觉稍微干净但是由于ng-repeat的工作方式,标题元素必须"包含"在与ng重复元素相同的水平.例如,如果你的NG-重复<tr>元素,这将意味着这将是无法插入另一个<tr>为头,因为特殊的元素有发生内部的<tr>

最后,沿着与上面相同的方向:

编辑:

我在这里写了一篇博客文章,解释了我最终如何处理这个问题 - 感谢由Ian在下面的答案链接的谷歌小组讨论.

Answer 1

创建角度过滤器.它可以接受排序列表,按第一个字母对其进行分块,并为每个块返回一个对象,其中包含字母和以该字母开头的对象数组.

例如,请参见大小过滤器块.请特别注意有关为分块值创建哈希值的讨论.