【AngularJS】使用ng-repeat中$index的注意點
發現問題
最近有客戶投訴，說在刪除指定的某條記錄時,結果刪掉的卻是另外一條記錄！看起來是個很嚴重的BUG。 有一次我們在工作中碰到了這個問題。 要定位這個BUG非常麻煩, 因為客戶也不清楚如何重現這個問題。
後來發現這個Bug是由於在 ng-repeat 中使用了 $index 引發的。
一個簡單動作(action)的列表
先來看看一個完整有效的ng-repeat示例。
?| 1 2 3 4 5 6 |
<ul
ng-controller="ListCtrl">
<li
ng-repeat="item
in items">
{{item.name}}
<button
ng-click="remove($index)">remove</button>
</li>
</ul>
|
對應的控制器(controller)如下:
?| 1 2 3 4 5 6 7 8 9 |
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 來查詢列表中的記錄。
?
1
2
3
相關推薦【Angularjs】ng-disabled定義和用法 ng-disabled 指令設定表單輸入欄位的 disabled 屬性(input, select, 或 textarea)。 如果 ng-disabled 中的表示式返回 true 則 【Angular】ng-repeat遍歷輸出陣列今天剛好做選擇題選項的顯示，拿到String型別的4個選項的集合，用分號分隔，然後做切割（split()）； A.相對，絕對;B.理論，實際;C.效率，比功;D.簡單，聯合; 先展示成功案例，然後再說之前報錯的地方； 1、js程式碼： funct 【AngularJS】使用ng-repeat中$index的注意點發現問題 最近有客戶投訴，說在刪除指定的某條記錄時,結果刪掉的卻是另外一條記錄！看起來是個很嚴重的BUG。 有一次我們在工作中碰到了這個問題。 要定位這個BUG非常麻煩, 因為客戶也不清楚如何重現這個問題。 後來發現這個Bug是由於在 ng-repeat 【AngularJS】Angularjs設定ng-repeat裡面迴圈出來的select的預設值<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> &l AngularJS中使用ng-repeat的indexAngularJS中的ng-repeat中，隱含的index，可以使用$index來訪問，也可以自己指定index對應的變數名。 - 使用隱含的index變數 隱含的index變數名是index，可以使用$index來訪問。 // 定義module和c AngularJS中 ng-repeat 排序後的 $index變化“有客戶投訴，說在刪除指定的某條記錄時,結果刪掉的卻是另外一條記錄!” 看起來是個很嚴重的BUG。 有一次我們在工作中碰到了這個問題。 要定位這個BUG非常麻煩, 因為客戶也不清楚如何重現這個問題。 後來發現這個Bug是由於在 ng-repeat 中使用了 $inde AngularJS 獲取ng-repeat的動態ng-modelcon $scope 對象 文件 spec input ram ng-repeat ng-model 首先ng-model設置為$parent.conf[$index]: 用$parent的原因是ng-repeat產生的，他會為每一個input生成一個子scope對象，而 【angularjs】使用angular搭建PC端項目，開關按鈕weight SM tps 資料 [] 文件 repeat amp title 方法一（使用指令） 1.指令（angular-ui-switch.js） angular.module(‘uiSwitch‘, []) app.directive(‘switch‘, 【AngularJs】傳送Post請求<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" 【Lombok】Lombok 在開發中注意的一點問題 在學習別人專案時，發現，匯入別人專案後get、set方法報錯，但是不影響執行。目錄結構中，一片紅色。終於忍不住還是查資料解決這個問題。 原因 我使用的Idea，沒有安裝Lombok外掛。 解決 1.File-->setting-->Pluins 安裝外 AngularJS的ng-repeat迴圈中如何獲得被迴圈列表的索引值使用angularJS框架的話都需要引入angular.min.js檔案，這個想必各位大佬都懂得，我就不多說了。 這裡主要說說AngularJS的ng-repeat迴圈中如何獲得被迴圈列表的索引值。 假如有一個表格： 程式碼如下： <table class="tabl 【angularJS】Service服務AngularJS 中的服務是一個函式或物件。可以建立自己的服務，或使用內建服務。 內建服務 AngularJS 內建了30 多個服務。 1、 $location 服務，它可以返回當前頁面的 URL 地址。 var app = angular.module('myApp AngularJs 在ng-repeat中動態使用ng-model進行雙向資料繫結首先說明一下功能需求： 當點選一次增加按鈕的時候，下方就會多一行輸入框； 當點選一次刪除按鈕的時候，所點選的刪除按鈕那行的輸入框會消失； 當點選列印資訊按鈕的時候，把所有輸入框中的資料讀取出來，並列印到控制檯上。 由此可看出，帶有刪除按鈕的這部分DIV是動態的。 【python3】leetcode 599. Minimum Index Sum of Two Lists（easy）599. Minimum Index Sum of Two Lists（easy） Suppose Andy and Doris want to choose a restaurant for dinner, and they both have a list of favorite 【AngularJS】ui-sref如何傳遞引數平時有些引數我們放在url裡面可以傳遞到下一個頁面，只需加上字串 "?args1=1&agrs2=2" 即可 但是在angular-ui-router中，我們通過ui-sref控制頁面跳轉，此時應該如何傳遞引數 ui-sref傳遞引數寫法： ui-sref 【AngularJS】過濾陣列中的子集（每一個子項都過濾）說白了就是filter+repeat； 原始碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8"& 【AngularJS】髒檢查機制及$timeout的妙用||瀏覽器事件迴圈和Angular的MVW “髒檢查”是Angular中的核心機制之一，它是實現雙向繫結、MVVM模式的重要基礎。 Angular將雙向繫結轉換為一堆w AngularJS中ng-repeat渲染完成事件和中間變數的引用ng-repeat渲染完成事件 因為在用AngularJS期間, 經常用到ng-repeat, 而有時需要在其渲染完成時操作已經渲染的物件, 所以特在此記錄一下新增渲染事件的方法, 以方便以後的使用; 程式碼如下 myApp.directive('onRepeatFin angularjs（ng-repeat和filter）生成多級選單需求如下： 後端通過資料庫生成無序的陣列，傳到前端，資料結構如下（pid即parentId，如本級的pid為4，則它上一級的menu_id為4）： [ {pid:1,menu_id:7}, {pid:4,menu_id 【bzoj2724】[Violet 6]蒲公英 （注意：題面有毒！）傳送門：http://www.lydsy.com/JudgeOnline/problem.php?id=2724 思路：首先我要說的是，題面真的有毒啊，，， 我不停WA發現讀錯了題，改了還WA發現又讀錯了，，一直該改改，，最後卡時過，，，我也是醉了，，，種類 |