Use ng-repeat to add/delete DOM element

Question

I have a question in Angularjs, I try to use ng-repeat to add/delete DOM element input and button for user,so they can use button to add or delete input element.

In fact,my code do word for this.

This is html code:

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

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

$scope.controlNumberOfInputRows = [];

$scope.addInputRow = function(){

    $scope.controlNumberOfInputRows.push(0);

}

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

};

But this code have a bug when user deleting the item, Angulayjs only delete last one.

If i set:

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

It work very well in [0]~[4],user can delete item by index ,but not in [5]~[X](delete last one)

Why?

P.S If i set:

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

It work very well in [0]~[4],user can delete item by index

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

Then we get:

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

If We use add input

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

Then we get:

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

I think i resolve my problem by acrobatic:

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

This do work well,but why? Idon't known...

It is working for me http://plnkr.co/edit/Wd4cUaLIRxiaCqENo8FR?p=preview — Arun P Johny, Apr 08 '13 at 03:57
My friend,Did you mean keying some different data in these input element and use [X]? It just delete last one.Did u use "add input"? — Wells, Apr 08 '13 at 04:08
Can you help us to recreate the issue/provide steps to recreate the issue using the above demo — Arun P Johny, Apr 08 '13 at 04:17

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

Try this: will do the delete:

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

To do this correctly you should use directives see here: Dealing with DOM Manipulations - AngularJS

edited May 23 '17 at 12:28

Community

1
1

answered Apr 08 '13 at 04:22

Andre

2,449
25
24

My friend,use (key,value) can delete,but only last one like mine,and this case don't need code $compile,ng-repeat will do it – Wells Apr 08 '13 at 05:45

score 0 · Accepted Answer · answered Apr 09 '13 at 01:45

0

I think i resolve my problem by acrobatic

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

This do word well,but why? Idon't known...

answered Apr 09 '13 at 01:45

Wells

212
2
12

Use ng-repeat to add/delete DOM element

2 Answers2