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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 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生成随机密码的三种方法小结
2010/09/04 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PDO::_construct讲解
2019/01/27 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python 文件读写操作实例详解
2014/03/12 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
python概率计算器实例分析
2015/03/25 Python
Python实现队列的方法
2015/05/26 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
速记Python布尔值
2017/11/09 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
护理职业应聘自荐书
2013/09/29 职场文书
大学生学习生活的自我评价
2013/11/01 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
教师业务培训方案
2014/05/01 职场文书
个人校本研修方案
2014/05/26 职场文书
微观世界观后感
2015/06/10 职场文书