Question

结帐这个plunkr
http://plnkr.co/edit/FQ7m6HPGRrJ80bYpH8JB?p=preview

当我使用splice方法从数组中删除元素时添加元素一切都搞砸了。

code

Answer 1

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

我建议另外一个解决方案：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
      });
    }
  }],

array.splice在Angular Js指令中显示奇怪的行为

3 个答案: