array.splice在Angular Js指令中顯示奇怪的行為

Question

簽出這個矮人
http://plnkr.co/edit/FQ7m6HPGRrJ80bYpH8JB?p=preview

在那之后，當我使用拼接方法從數組中刪除元素時。
一切都搞砸了。

code

Answer 1

Array.splice需要一個數組索引。 代碼的問題在於，您正在將ngModel.index傳遞給removeNode函數，並使用該index （不是實際的數組索引）對數組進行拼接。

您需要通過循環遍歷並檢查每個元素的index屬性來找到正確的元素索引。 當我在做angular.forEach ，其中的seconds參數為我們提供了該數組的實際索引。

碼

    $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 2

創建對象時，請使用“ 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 3

我為此建議另一種解決方案： 演示

在我看來：

• 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
      });
    }
  }],