Angularjs dynamic add and remove input

Question

My code on jsfiddle.

HTML

<div ng-controller="MyCtrl">
  <input>
  <button ng-click='add()'>Add</button>
  <br/>
  <b>Items Added Below</b>
  <div ng-repeat='item in items'>
    <input ng-model='item' id='item-{{$index}}' class='input-{{$index}}'/>
    <button ng-click='del($index)'>DEL</button>
  </div>
</div>

Angular Controller

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
  $scope.items = [];
  $scope.newitem = '';
  $scope.add = function(){
    if ($scope.items.length < 4) {
      $scope.items.push($scope.newitem);
    }
  }
  $scope.del = function(i){
    $scope.items.splice(i,1);
  }
}

I try to dynamic add input by ng-click and remove specific but always delete last input..
I think its because they are not distinguish in items array.
How I can fix this ?

My slightly modified fiddle shows that you are incorrect. If I add the value to "newitem" so that I can see what I am deleting, it properly deletes the item I tell it to delete. jsfiddle.net/9j34dnpo — David L
– David L, Commented Aug 14, 2015 at 17:47
Still not delete specific input but always the last one :/ @Ronnie on my project I use newer versions :) You think the problem is version of angularjs ? — m1l05z
– m1l05z, Commented Aug 14, 2015 at 17:57

David Zech · Accepted Answer · 2015-08-14 18:08:41Z

3

There are two parts to this:

You aren't binding your first input (next to the add). This means you are only adding '' to the array. As far as I know, angularjs tracks by keys, not index by default. This leads me to part 2.
You are using an old AngularJS version, which according to the docs has no option to "{expr} track by $index". Look at 1.4.4 docs for information on this.

So I'd probably use the latest stable AngularJS and make sure your first input binds to $newitem.

answered Aug 14, 2015 at 18:08

David Zech

7553 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vaibhav Pachauri · Accepted Answer · 2015-08-14 18:21:07Z

2

Have a look at the following fiddle :

fiddle ::http://jsfiddle.net/4zt4ynzL/

The problem was that you are pushing the empty string in the array every time.

As I have shown in the above fiddle, I have pushed a new value on every click of add button.

P.S. : You were doing it all correct :)

answered Aug 14, 2015 at 18:21

Vaibhav Pachauri

2,6712 gold badges21 silver badges34 bronze badges

Comments

Akshay Dhankhar · Accepted Answer · 2015-08-14 17:52:37Z

1

Your code is working fine as you want.

just a single mistake you have not add ng-model on input for newitem.

Look JsFiddle

<div ng-app="myApp"> 
    <div ng-controller="MyCtrl">
  <input ng-model="newitem">
  <button ng-click='add()'>Add</button>
  <br/>
  <b>Items Added Below</b>
  <div ng-repeat='item in items'>
    <input ng-model='item' id='item-{{$index}}' class='input-{{$index}}'/>
    <button ng-click='del($index)'>DEL</button>
  </div>
</div>
</div>

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
  $scope.items = [];
  $scope.newitem = '';
  $scope.add = function(){
    if ($scope.items.length < 4) {
      $scope.items.push($scope.newitem);
    }
  }
  $scope.del = function(i){
    $scope.items.splice(i,1);
  }
}

answered Aug 14, 2015 at 17:52

Akshay Dhankhar

2741 silver badge6 bronze badges

5 Comments

Akshay Dhankhar Over a year ago

its your code i tell the issue in it..:) what exactly you want..?

m1l05z Over a year ago

Delete specific input.. On yours jsfiddle I can add only one input, then add button don't work..

Akshay Dhankhar Over a year ago

it because you are adding duplicate values. you have to put validation on your code for 1 new entry at a time with same valuee.

Akshay Dhankhar Over a year ago

its a concept of repeater to add distinct id in ng-repeat for mg-model..:) It's not issue with your delete.. Issue with the validation.you have to write your code accordingly.

David Zech Over a year ago

@AkshayDhankhar is right about duplicates, I'd add that to your answer.

Prakash Pazhanisamy · Accepted Answer · 2017-09-27 13:56:01Z

0

In simple way you can use this:

HTML:

<span ng-repeat="hobby in hobbies track by $index">
    <div class="form-group">
        <input type='text' ng-model='hobbies[$index]' class="form-control pull-right"/>
        <button ng-click = "addHobby()" ng-show="$last">+</button>
        <button ng-click = "removeHobby($index)" ng-show="hobbies.length > 1">-</button>
    </div>
</span>

Angular Controller:

$scope.hobbies = [''];

$scope.addHobby = function() {
    $scope.hobbies.push('');
}

$scope.removeHobby = function(index) {
    if(index >= 0){
        $scope.hobbies.splice(index, 1);
    }
}

edited Sep 27, 2017 at 13:56

answered Sep 27, 2017 at 13:26

Prakash Pazhanisamy

9831 gold badge15 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angularjs dynamic add and remove input

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related