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 ...
随机推荐
- 「题解」:07.16NOIP模拟T2:通讯
问题 B: 通讯 时间限制: 1 Sec 内存限制: 256 MB 题面 题目描述 “这一切都是命运石之门的选择.” 试图研制时间机器的机关SERN截获了中二科学家伦太郎发往过去的一条短 信,并由此 ...
- CF696B Puzzles(期望dp)
传送门 解题思路 比较有意思的一道题.首先假如这个点\(x\)只有\(1\)个儿子\(u\),那么显然可得\(dp[u]=dp[x]+1\).继续如果多加一个儿子\(p\),那么\(p\)在\(u\) ...
- ES,kibana通过nginx添加访问权限
一.安装nginx yum install epel-release -y yum install -y nginx 二.安装Apache Httpd 密码生成工具 # 生成密码 yum instal ...
- Dll注入技术之注册表注入
DLL注入技术之REG注入 DLL注入技术指的是将一个DLL文件强行加载到EXE文件中,并成为EXE文件中的一部分,这样做的目的在于方便我们通过这个DLL读写EXE文件内存数据,(例如 HOOK EX ...
- Python服务端工程师就业面试指导✍✍✍
Python服务端工程师就业面试指导 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的时 ...
- HDU 3607 线段树+DP+离散化
题意:从左往右跳箱子,每个箱子有金币数量,只能从矮处向高处跳,求最大可获得金币数,数据规模1<=n<=1e5. 显然是一个dp的问题,不难得出dp[ i ] = max(dp[j] )+v ...
- USACO2008 Patting Heads /// 筛数 oj24705
题目大意: N (1 < N < 100,000)头牛被编号为1-N,围坐成圈 每头牛都被画上数字Ai (1 ≤ Ai ≤ 1,000,000),可能重复 逐个起来拍打 其他身上的数字是 ...
- POJ1149_PIGS(网络流/EK)
PIGS Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 15721 Accepted: 7021 Description ...
- 转载:ASP.NET Core 在 JSON 文件中配置依赖注入
在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等)时候,都是提供了专有的接口以供使用第三方的依赖注入组件,比如我们常用的会使用 Autofac.Untiy.Stri ...
- js正则表达式常见面试题
1 . 给一个连字符串例如:get-element-by-id转化成驼峰形式. var str = "get-element-by-id"; var reg = /-\w/g; / ...