unable to delete dynamically added form fields using angular js

Question

I am using AngularJS v1.5.8.

In html

<div class="form-group row" data-ng-repeat="friend in friends track by $index">
            <label class="col-xs-1 control-label">Friend </label>
            <div class="col-xs-2">
                <input type="text" class="form-control" required ng-model="friend.first_name"  placeholder="First Name" />
            </div>
            <div class="col-xs-2">
                <input type="text" class="form-control" required ng-model="friend.last_name"  placeholder="Last Name" />
            </div>
            <div class="col-xs-4">
                <input type="email" class="form-control" required ng-model="friend.email"  placeholder="Email" />
            </div>
            <div class="col-xs-2">
                <input type="text" class="form-control" ng-model="friend.phone" placeholder="Phone" />
            </div>
            <div class="col-xs-1">
                <a href="#" ng-click="addMore($index)"><span class="glyphicon glyphicon-plus"></span></a>
            </div>
            <div class="col-xs-1">
                <a href="#" ng-click="removeFriend($index)"><span class="glyphicon glyphicon-remove"></span></a>
            </div>
            <div class="clearfix"></div>

In controller

$scope.friends = [{first_name: "", last_name: "", email: "", phone: ""}];

$scope.addMore = function () {
    console.log('in add');
    $scope.friends.push({
        first_name: "",
        last_name: "",
        email: "",
        phone: ""
    });
};

$scope.removeFriend = function(index) {
    console.log("in remove: "+index);
    $scope.friends.splice(index,1);//delete last row in html form..am I expecting something wrong....
};

while I inspect the code I get removeList($index) instead I was hoping removeList(1) or removeList(4).

What possibly can be wrong?

I have two questions - why even if I am passing index correctly , it end up deleting last element - how data entered will be updated in angular...

If you have some tutorial to follow please share the link

Your code looks good. If there is a problem, it's not in the portion of code you posted. Is there any error on console? — lealceldeiro
– lealceldeiro, Commented Mar 3, 2017 at 20:16
You have a typo: $scope.list.splice(referIndex,1); should be $scope.lists.splice(referIndex,1); — Lex
– Lex, Commented Mar 3, 2017 at 20:21

Vohid Karimov · Accepted Answer · 2017-03-03 20:18:57Z

2

I think you have some typos:

$scope.removeList = function(referIndex) {
            console.log("in remove: " + referIndex); // note it is + not .
            $scope.lists.splice(referIndex, 1); // note $scope.lists not $scope.list
        };

answered Mar 3, 2017 at 20:18

Vohid Karimov

5495 silver badges10 bronze badges

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

1 Comment

user269867 Over a year ago

Yes I corrected my code and now it does log correct index but it always end up deleting the last row on html form

Murari Pradip Singh · Accepted Answer · 2017-03-03 23:10:41Z

Here no need to use track by index because we are not using duplicate key. Please use below code

<div ng-app="myApp" ng-controller="myCtrl">
<div  class="form-group row" data-ng-repeat="friend in friends">
    <label class="col-xs-1 control-label">Friend </label>
    <div class="col-xs-2">
        <input type="text" class="form-control" required ng-model="friend.first_name"  placeholder="First Name" />
    </div>
    <div class="col-xs-2">
        <input type="text" class="form-control" required ng-model="friend.last_name"  placeholder="Last Name" />
    </div>
    <div class="col-xs-4">
        <input type="email" class="form-control" required ng-model="friend.email"  placeholder="Email" />
    </div>
    <div class="col-xs-2">
        <input type="text" class="form-control" ng-model="friend.phone" placeholder="Phone" />
    </div>
    <div class="col-xs-1">
        <a href="#" style="margin-left:120px;" ng-click="removeFriend($index)"><span class="glyphicon glyphicon-remove">Remove</span></a>
    </div>
</div> 
<div class="col-xs-1">
    <a href="#" ng-click="addMore($index)"><span class="glyphicon glyphicon-plus">Add</span></a>
</div>
</div>        
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>      
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope)
     {    
         $scope.friends = [{first_name: "", last_name: "", email: "", phone: ""}];
         $scope.addMore = function () {
            console.log('in add');
            $scope.friends.push({
                first_name: "",
                last_name: "",
                email: "",
                phone: ""
            });
        };
        $scope.removeFriend = function(index)
         {
            console.log("in remove: "+index);
            $scope.friends.splice(index,1);//delete last row in html form..am I expecting something wrong....
        };
    })
</script>

Collectives™ on Stack Overflow

unable to delete dynamically added form fields using angular js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related