javascript – ng-repeat中的AngularJS“标题”

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

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

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

等等.

我尝试过的事情包括:

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

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

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

这感觉稍微干净但是由于ng-repeat的工作方式,标题元素必须“包含”在与ng重复元素相同的水平.例如,如果你在< tr>上进行ng-repeat.元素,这意味着不可能插入另一个< tr>对于标题,因为特殊元素必须出现在< tr>内.

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

>让控制器维护一个“关键索引”列表 – 这样做的好处是不像上面的第二种方法那样修改数据,但通常以相同的方式工作.

编辑:

我写了一篇here的博客文章,解释了我最终如何处理这个问题 – 感谢由Ian在下面的回答链接的Google Groups讨论.

解决方法

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)