使用ng-repeat添加/删除DOM元素<input>

Question

我在Angularjs中有一个问题，我尝试使用ng-repeat为用户添加/删除DOM元素输入和按钮，以便他们可以使用按钮添加或删除输入元件。

事实上，我的代码为此做了一些事情。

这是HTML代码：

<a class="btn pull-right" ng-click="addInputRow()">add input</a>  
<p class="" ng-repeat="item in controlNumberOfInputRows"> 
<span>NO.{{$index+1}}</span> 
name:<input name="name" type="text" class="span2" /> 
phone:<input name="phone" type="text" class="span2" /> 
ID:<input name="ID" type="text" class="span3" /> 
<a class="class" ng-click="deleteThis($index)">X</a> 
</p> 

javascript代码：

myModule.controller('MainCtrl', function($scope,$http){ 

$scope.controlNumberOfInputRows = []; 

$scope.addInputRow = function(){ 

    $scope.controlNumberOfInputRows.push(0); 

} 

$scope.deleteThis = function(st){ 
    $scope.controlNumberOfInputRows.splice(st,1); 

}; 

但这种代码有一个bug，当用户删除的项目，仅Angulayjs删除 最后一个。

如果我设置：

$scope.controlNumberOfInputRows = [0,1,2,3,4]; 

它在[0]〜[4]，用户可以删除项目通过索引 很好地工作，但不能在[5]〜[X]（删除最后一个）

为什么？

PS 如果我设置：

$scope.controlNumberOfInputRows = [0,1,2,3,4]; 

它在[0]〜[4]，用户可以通过删除索引项工作得很好

name[Wells] Phone[123] ID[1] X 
name[Wells] Phone[123] ID[2] X 
name[Wells] Phone[123] ID[3] X << delete this 
name[Wells] Phone[123] ID[4] X 
name[Wells] Phone[123] ID[5] X 

然后我们得到：

name[Wells] Phone[123] ID[1] X 
name[Wells] Phone[123] ID[2] X 
name[Wells] Phone[123] ID[4] X 
name[Wells] Phone[123] ID[5] X 

如果我们使用加入输入

name[Wells] Phone[123] ID[1] X 
name[Wells] Phone[123] ID[2] X 
name[Wells] Phone[123] ID[3] X 
name[Wells] Phone[123] ID[4] X 
name[Wells] Phone[123] ID[5] X 
name[Wells] Phone[123] ID[6] X 
name[Wells] Phone[123] ID[7] X 
name[Wells] Phone[123] ID[8] X << delete this 
name[Wells] Phone[123] ID[9] X 

然后我们得到：

name[Wells] Phone[123] ID[1] X 
name[Wells] Phone[123] ID[2] X 
name[Wells] Phone[123] ID[3] X 
name[Wells] Phone[123] ID[4] X 
name[Wells] Phone[123] ID[5] X 
name[Wells] Phone[123] ID[6] X 
name[Wells] Phone[123] ID[7] X 
name[Wells] Phone[123] ID[8] X 

我想我的杂技解决我的问题：

var index = 0; 
    $scope.controlNumberOfInputRows = []; 
    $scope.addInputRow = function(){ 
     index ++; 
     $scope.controlNumberOfInputRows.push(index);  
    } 

做这工作得很好，但是为什么呢？ 。我不知道......

Answer 1

我想我的杂技解决我的问题

$scope.addInputRow = function(){ 
     index ++; 
     $scope.controlNumberOfInputRows.push(index);  
    } 

这样做很好，但为什么？ Idon't知道...

Answer 2

试试这个：将做删除：

<a class="btn pull-right" ng-click="addInputRow()">add input</a>  
<p class="" ng-repeat="(key,value) in controlNumberOfInputRows"> 
<span>NO.{{value+1}}</span> 
name:<input name="name" type="text" class="span2" /> 
phone:<input name="phone" type="text" class="span2" /> 
ID:<input name="ID" type="text" class="span3" /> 
<a class="class" ng-click="deleteThis($index)">X</a> 
</p> 

要正确地做到这一点，你应该使用指令在这里看到：Dealing with DOM Manipulations - AngularJS