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

Answer 1

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

Answer 2

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>