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