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

我在Angularjs中有一個問題，我嘗試使用ng-repeat爲用戶添加/刪除DOM元素輸入和按鈕，以便他們可以使用按鈕添加或刪除輸入元件。使用ng-repeat添加/刪除DOM元素<input>

事實上，我的代碼爲此做了一些事情。

這是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);  
    }

做這工作得很好，但是爲什麼呢？。我不知道......

來源

2013-04-08 Wells

它對我有用http://plnkr.co/edit/Wd4cUaLIRxiaCqENo8FR?p=preview – 2013-04-08 03:57:45

我的朋友，你的意思是鍵入這些輸入元素中的一些不同的數據，並使用[X] ？它只是刪除最後一個。你使用「添加輸入」？ – Wells 2013-04-08 04:08:03

你可以幫助我們重新創建問題/提供步驟來重新使用上述演示問題 – 2013-04-08 04:17:46

我想我的雜技解決我的問題

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

這樣做很好，但爲什麼？ Idon't知道...

來源

2013-04-09 01:45:12 Wells

試試這個：將做刪除：

<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

來源

2013-04-08 04:22:35 Andre

我的朋友，使用（鍵，值）可以刪除，但只有像我的最後一個，而這種情況下不需要代碼$ compile，ng-repeat會做到這一點 – Wells 2013-04-08 05:45:21

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

回答

相關問題