how to update the list in angularjs?

Question

could you please tell me how to update list item in angular js ..Actually i am adding item on using add button .it is generated a row dynamically .there is update and delete button on row ..please check on full screen .when you press delete button it delete the row which is running fine .I need to update the row also using update button . when I click update button I set the value in input fields .But I need to change the text of button “update” instead of “add” button and user can update the value by clicking update it will also reflect on list

here is my code http://plnkr.co/edit/VrfKKxdjcZsVx6uSd8kL?p=preview

var app=angular.module('app', ['ui.bootstrap']);
app.controller('listcontroller',function($scope){

    $scope.data=[]
    $scope.addItem=function(){
        $scope.data.push({
            name:$scope.firstname,
            lastname:$scope.lastname,
        })
        $scope.firstname='';
        $scope.lastname=''
    }

    $scope.delete=function(index){


        $scope.data.splice(index, 1);

    }

    $scope.update=function(index){


       var obj =$scope.data[index]
        console.log(obj)

        $scope.firstname=obj.name;
        $scope.lastname=obj.lastname;

    }
})

Answer 1

Now in your html template you always call on ng-click the addItem() function. On update you should call another function ex updateItem() function. One solution to do this is to have 2 buttons one for add and one for update and just show/hide the current button.

Here is a forked plnkr that is workig http://plnkr.co/edit/dO9xFZcVpsKvKYwbLOkq?p=preview

Answer 2

Just to expand on @user944513 answer, add

$scope.firstname=''; $scope.lastname=''; $scope.currentUpdate = null;

into the the update function on her Plunker.

I would post this in comments but rep is to low. Please tick as correct answer as could do with rep haha.