javascript - ng-repeat 中的 AngularJS "headers"

Question

最近出现的问题不止一个，我想知道解决这个问题的最佳方法。简单地说:

我有数据显示在 ng-repeat 中，按特定项目排序。例如，假设它按名称排序。我的目标是在按字母顺序排列的列表中的字母分隔符处设置标题:

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

等等。

我尝试过的事情包括:

• 让 Controller 完全重新构建传入的模型数据，手动将其放入一组字母组中。例如，我的服务有一个“posts”数组，而我的 Controller 在服务更新时手动将这些“posts”洗牌到一个“letterGroups”数组中。然后就有可能只有两个嵌套的 ng-repeats

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

• 当模型更新时，让 Controller “添加”数据，方法是手动遍历数据，检查字母何时更改，并在该元素上搭载“ header ”属性 (post.header = true)。然后 ng-repeat 可以检查它当前所在的元素是否是标题，并使用 ng-if 将其他内容插入 DOM。

这感觉稍微干净一些，但由于 ng-repeat 的工作方式，header 元素必须“包含”在与 ng-repeating 元素相同的级别。例如，如果您对 <tr> 执行 ng-repeat元素，这意味着不可能插入另一个 <tr>对于 header ，因为特殊元素必须出现在 <tr> 的内部

最后，按照上面的思路:

• 让 Controller 维护一个“关键索引”列表——这具有不像上面第二种方法那样修改数据的优点，但通常以相同的方式工作。

编辑:

我写了一篇博文 here解释我最终是如何处理这个问题的 - 感谢下面 Ian 的回答链接的 Google Groups 讨论。

Answer 1

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

例如参见 chunk by size filter here .请特别注意有关为分块值创建哈希值的讨论。