方法Array.splice示出了角的js指令奇怪的行爲

Question

結帳此plunkr
http://plnkr.co/edit/FQ7m6HPGRrJ80bYpH8JB?p=preview

在該添加時，我使用拼接方法從數組中刪除元素元素之後。
一切都搞砸了。

code 

Answer 1

當你創建一個對象，你硬編碼每一個新添加的對象的索引與你 「ABC」

var abc = 0; 
$scope.addNode = function(){ 
    abc++; 
    var addObj = {name:"name"+abc, index:abc}; 
    $scope.sitemap.push(angular.copy(addObj)); 
} 

的值。然後，當你使用此硬編碼值的索引刪除和調用函數

$scope.removeNode = function(index){ 
    $scope.sitemap.splice(index,1);      
} 

因此，例如，讓說你有這個數組：

obj1 - hardcoded index 0 - array index 0 
obj2 - hardcoded index 1 - array index 1 

如果從數組索引0刪除OBJ1您obj2的將有索引爲0的數組，然後在，

obj2 - hardcoded index 1 - array index 0 

但在你的情況下，你仍然傳遞給removeNode函數索引1，因爲它是用該值創建的。

Answer 2

Array.splice需要一個數組索引。您的代碼的問題在於，您將ngModel.index傳遞給removeNode函數，並將該數組與不是實際數組索引的index拼接在一起。

您需要通過循環查找正確的元素索引並檢查每個元素的index屬性。因爲我在做angular.forEach哪個秒參數給了我們該陣列的實際索引。

代碼

$scope.removeNode = function(index) { 
     var foundIndex; 
     angular.forEach($scope.sitemap, function(value, idx){ 
     if(value.index === index) 
     foundIndex = idx; 
     }) 

     $scope.sitemap.splice(foundIndex, 1); 

    } 

Demo Plunkr

Answer 3

我建議是另一種解決方案：Demo

在我看來：

• sitemap不應該在當前的指令（sample）定義，因爲它是列表項（未列表）。

• 此外，在您的控制器中有addNode方法。那裏，應該宣佈removeNode。

您可以通過訪問removeAction: '&removeAction',控制器的指令中的方法：

scope: { 
    ngModel: "=ngModel",//or "=" 
    removeAction: '&removeAction',//or "&" 
    }, 
    controller: ["$scope", function($scope) { 
    $scope.removeNode = function(item) { 
     $scope.removeAction({ 
     item: item 
     }); 
    } 
    }],