AngularJS实践之使用ng-repeat中$index的注意点


Posted in Javascript onDecember 22, 2016

发现问题

最近有客户投诉,说在删除指定的某条记录时,结果删掉的却是另外一条记录!看起来是个很严重的BUG。 有一次我们在工作中碰到了这个问题。 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题。

后来发现这个Bug是由于在 ng-repeat 中使用了 $index 引发的。

一个简单动作(action)的列表

先来看看一个完整有效的ng-repeat示例。

<ul ng-controller="ListCtrl">
 <li ng-repeat="item in items">
 {{item.name}}
 <button ng-click="remove($index)">remove</button>
 </li>
</ul>

对应的控制器(controller)如下:

app.controller('ListCtrl', ['$scope', function($scope) {
 //items come from somewhere, from where doesn't matter for this example
 $scope.items = getItems();

 $scope.remove = function(index) {
 var item = $scope.items[index];
 removeItem(item);
 };
}]);

看起来没什么问题,对吗? 这段代码也没有任何特别值得注意的。

添加一个过滤器(filter)

然后,让我们来做一个小小的修改: 给列表添加一个过滤器。 这是很常见的做法,如果列表很长的话,例如允许用户进行搜索。

为了方便起见, 假设我们通过 searchFilter 来查询列表中的记录。

<ul ng-controller="ListCtrl">
 <li ng-repeat="item in items | searchFilter">
 {{item.name}}
 <button ng-click="remove($index)">remove</button>
 </li>
</ul>

控制器的代码保持不变。 看起来仍然没有问题,是吧?

事实上,有一个bug藏在里面。 如果我不说, 你能找到吗? 如果能找到,你就已经是Angular大牛了.

请尽量不要使用 $index

BUG其实是在控制器里面:

$scope.remove = function(index) {
 var item = $scope.items[index];
 removeItem(item);
};

这里使用了 index参数, 然后就遇到了BUG: 过滤后的索引(indexs)不匹配原始列表的索引。

幸运的是,有一个很简单的方法来避免这种问题: 不要使用$index,而改成实际的item对象。

<ul ng-controller="ListCtrl">
 <li ng-repeat="item in items | searchFilter">
 {{item.name}}
 <button ng-click="remove(item)">remove</button>
 </li>
</ul>

控制器如下所示:

$scope.remove = function(item) {
 removeItem(item);
};

注意, 这里将 remove($index) 改成 remove(item) , 并修改了 $scope.remove 函数来直接操作传过来的对象。

这个小小的修改就完全避免了刚才的BUG。

为了更好地说明问题以及解决方案,请参考 interactive example 。

从中可以学到什么?

      第一个教训当然是在使用 $index 要小心一点,因为以某些方式使用时很可能会产生BUG。

      第二个教训是,请记住类似这样的模式,则可以用更好的做事方式,可以完全避免某些类型的BUG。 我强烈建议大家现在不要使用 $index, 从这种简单的思维转变中,就可以减少代码中的很多BUG。

      第三个教训是测试并不是什么时候都有用。 即便有自动化测试,也覆盖了足够多的情形, 但对于依赖特定输入的情况,也很容易错过某些BUG。 错误本身并不是每次都会出现,即使你也用过滤来测试。

      第四个教训是不要破坏抽象 —— 这一点很容易被忽略。理论上 $index 是由 ng-repeat 创建的一个 “模板变量(template variable)”。 这只在 repeat 块里面有意义(并正确起作用)。 当我们将它的值传递到外面时,它就失去了上下文从而不再有效。 如果确实想让它在 repeat 之外依然有效,则必须在控制器中也进行过滤,这就需要一些不是很必要的重复代码。 值得庆幸的是本文中介绍的模式可以用来避免这种情况。

结束语

以上就是关于AngularJS实践之ng-repeat中$index使用注意事项的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

原文链接: AngularJS best practices: Be careful when using ng-repeat's $index

原文日期: 2014-11-10

翻译日期: 2015-01-23

翻译人员: 铁锚 http://blog.csdn.net/renfufei

Javascript 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
js实现右键自定义菜单
Dec 03 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
js中的数组对象排序分析
Dec 11 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
js实现双色球效果
Aug 02 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 #Javascript
Bootstrap源码解读表单(2)
Dec 22 #Javascript
javascript学习之json入门
Dec 22 #Javascript
Bootstrap源码解读网格系统(3)
Dec 22 #Javascript
js微信支付实现代码
Dec 22 #Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 #Javascript
Html中 IFrame的用法及注意点
Dec 22 #Javascript
You might like
php object转数组示例
2014/01/15 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
JavaScript async/await原理及实例解析
2020/12/02 Javascript
Python help()函数用法详解
2014/03/11 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
vscode 远程调试python的方法
2017/12/01 Python
详解python的ORM中Pony用法
2018/02/09 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python实现大文件分割与合并
2019/07/22 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
运动会领导邀请函
2014/01/10 职场文书
司机职责范本
2014/03/08 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
2014年科研工作总结
2014/12/03 职场文书
大学教师个人总结
2015/02/10 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书