AngularJS實踐之使用ng-repeat中$index的注意點
發(fā)現(xiàn)問題
最近有客戶投訴,說在刪除指定的某條記錄時,結果刪掉的卻是另外一條記錄!看起來是個很嚴重的BUG。 有一次我們在工作中碰到了這個問題。 要定位這個BUG非常麻煩, 因為客戶也不清楚如何重現(xiàn)這個問題。
后來發(fā)現(xiàn)這個Bug是由于在 ng-repeat 中使用了 $index 引發(fā)的。
一個簡單動作(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參數(shù), 然后就遇到了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
函數(shù)來直接操作傳過來的對象。
這個小小的修改就完全避免了剛才的BUG。
為了更好地說明問題以及解決方案,請參考 interactive example 。
從中可以學到什么?
第一個教訓當然是在使用 $index 要小心一點,因為以某些方式使用時很可能會產生BUG。
第二個教訓是,請記住類似這樣的模式,則可以用更好的做事方式,可以完全避免某些類型的BUG。 我強烈建議大家現(xiàn)在不要使用 $index, 從這種簡單的思維轉變中,就可以減少代碼中的很多BUG。
第三個教訓是測試并不是什么時候都有用。 即便有自動化測試,也覆蓋了足夠多的情形, 但對于依賴特定輸入的情況,也很容易錯過某些BUG。 錯誤本身并不是每次都會出現(xiàn),即使你也用過濾來測試。
第四個教訓是不要破壞抽象 —— 這一點很容易被忽略。理論上 $index 是由 ng-repeat 創(chuàng)建的一個 “模板變量(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
相關文章
AngularJS框架的ng-app指令與自動加載實現(xiàn)方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動加載實現(xiàn)方法,結合實例形式分析了ng-app指令的功能及自動加載機制的實現(xiàn)技巧,需要的朋友可以參考下2017-01-01Angularjs注入攔截器實現(xiàn)Loading效果
angularjs作為一個全ajax的框架,對于請求,如果頁面上不做任何操作的話,在結果反回來之前,頁面是沒有任何響應的,不像普通的HTTP請求,會有進度條之類2015-12-12使用AngularJS 應用訪問 Android 手機的圖片庫
這篇文章主要介紹了使用AngularJS 應用訪問 Android 手機的圖片庫的相關資料,需要的朋友可以參考下2015-03-03Angular實現(xiàn)一個簡單的多選復選框的彈出框指令實例
下面小編就為大家?guī)硪黄狝ngular實現(xiàn)一個簡單的多選復選框的彈出框指令實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04AngularJS之ionic 框架下實現(xiàn) Localstorage本地存儲
這篇文章主要介紹了AngularJS之ionic 框架下實現(xiàn) Localstorage本地存儲,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04