angularJS ng-repeat="item in XXX track by $index"问题记录
参考:https://blog.csdn.net/lunhui1994_/article/details/80236315
问题:项目中对数据做了分页效果,理想是:当页数大于6时,隐藏>6的页数。点击上一页、下一页时,对应序号高亮。当前页>=6,点击下一页时,序号始终无法高亮。
原因:ng-repeat="item in pagenum track by $index" —— track by $index这句有问题
由于$index会跟随item上移下移,或者随之被删除。(例如你把列表第二条和第一条位置互换,这时候列表现在第一条的index依旧为2,第二条还是原来的1)此时再使用‘index`传值就不在是新数组的索引了,不再匹配
我一开始时让序号数组pagenum只取前6页。当前页>=6,点击下一页时再加载后面的页数,始终只取6页,重新排序了pagenum,所以出了问题。
解决:去掉“track by $index”或者按其他唯一标志排序即可。
angularJS ng-repeat="item in XXX track by $index"问题记录的更多相关文章
- 在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index
在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index,不然会报错 <div class="" ng-in ...
- Part 6 AngularJS ng repeat directive
ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...
- ng-repeat 中的 track by $index
用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...
- angular ng-repeat点击切换样式,浅谈track by $index
前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...
- AngularJS track by $index引起的思考
今天写了一段程序,只是一个简答的table数据绑定,但是绑定select的数据之后,发现ng-change事件失去了效果,不知道什么原因. 主要用到的代码如下: <div id="ri ...
- part 4 AngularJS ng src directive
- Part 15 AngularJS ng init directive
The ng-init directive allows you to evaluate an expression in the current scope. In the following e ...
- 修改QList中的item(使用下标([index])才可以获得可修改的item的引用)
QList算是最常用的集合了,今儿偶然间需要修改QList中的值,结果郁闷了.QList中提供了replace函数来替换item,但不是修改.而at().value()操作均返回的是const的ite ...
- 取消GridView/ListView item被点击时的效果 记录学习
方法一,在控件被初始化的时候设置 gridView.setSelector(new ColorDrawable(Color.TRANSPARENT)); listView.setSelector(ne ...
随机推荐
- Android中使用占位符
Android中占位符的使用 有些朋友可能会动态的修改Android中strings.xml文件中的值,在这里给大家推荐一种简单的方法. strings.xml中节点是支持占位符的,如下所示: < ...
- 暴力三维树状数组求曼哈顿距离求最值——牛客多校第八场D
涉及的知识点挺多,但是大多是套路 1.求曼哈顿距离的最值一般对所有情况进行讨论 2.三维树状数组用来求前缀最大值 /* 有一个三维坐标系(x,y,z),取值范围为[1,n],[1,m],[1,h],有 ...
- hive常见的存储格式
Hive常见文件存储格式 背景:列式存储和行式存储 首先来看一下一张表的存储格式: 字段A 字段B 字段C A1 B1 C1 A2 B2 C2 A3 B3 C3 A4 B4 C4 A5 B5 C5 行 ...
- NX二次开发-UFUN打开选择文件夹对话框UF_UI_create_filebox
#include <uf.h> #include <uf_ui.h> #include <string> using namespace std; string O ...
- Elasticsearch(Transport Client)常用操作
这里描述操作elasticsearch采用TransportClient这种方式,官方明确表示在ES 7.0版本中将弃用TransportClient客户端,且在8.0版本中完全移除它. 记录一些常用 ...
- maven中报错Missing artifact com.oracle:ojdbc14:jar:10.2.0.4.0
在检索完工程后报错Missing artifact com.oracle:ojdbc14:jar:10.2.0.4.0. 由于oracle的ojdbc收费,所以在maven项目导入时没有ojdbc14 ...
- arm-linux-strip 的使用
3.2.1 1. 移除所有的符号信息 [arm@localhost gcc]#cp hello hello1 [arm@localhost gcc]#armlinuxstrip strip ...
- lvs负载均衡连接
http://blog.csdn.net/zwz1984/article/details/45194377 http://blog.csdn.net/zwz1984/article/details/4 ...
- SpringDataJPA在Entity中常用的注解浅析
首先我们常用的注解包括(@Entity.@Table.@Id.@IdClass.@GeneratedValue.@Basic.@Transient.@Column.@Temporal.@Enumera ...
- 天才ACM
天才ACM 给定一个整数m,定义一个集合的权值为从这个集合中任意选出m对数(不够没关系,选到尽可能选,凑不成对的舍去),每对数两个数的差的平方的和的最大值. 现在给出一个数列\(\{a_i\}\),询 ...