Updating using AngularJS

Shopping.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
    <title>Shopping</title>
  </head>
  <body>
   <h1>Two Way Data Binding Example</h1><br>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js">
    </script>
      <script src="Shopping.js"></script>
  <div ng-app>
        <div ng-controller="ShoppingCartCtrl">
            <br />
            <table border="1">
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>Price</td>
                        <td>Quantity</td>
                        <td>Remove Item</td>
                    </tr>
                </thead>
                <tbody ng-repeat="item in items">
                    <tr>
                        <td>{{item.Name}}</td>
                        <td>{{item.Price}}</td>
                        <td>{{item.Quantity}}</td>
                        <td><input type="button" value="Remove" ng-click="removeItem($index)" /></td>
                    </tr>
                </tbody>
            </table>
            <br />
            <div>Total Price: {{totalPrice()}}</div>
            <br />
            <table>
                <tr>
                    <td>Name: </td>
                    <td><input type="text" ng-model="item.Name" /></td>
                </tr>
                <tr>
                    <td>Price: </td>
                    <td><input type="text" ng-model="item.Price" /></td>
                </tr>
                <tr>
                    <td>Quantity: </td>
                    <td><input type="text" ng-model="item.Quantity" /></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>

                </tr>
            </table>
        </div>
    </div>
        </body>
</html>

Shopping.js

function ShoppingCartCtrl($scope)  {
        $scope.items = [
            {Name: "Soap", Price: "25", Quantity: "10"},
            {Name: "Shaving cream", Price: "50", Quantity: "15"},
            {Name: "Shampoo", Price: "100", Quantity: "5"}
        ];

        $scope.addItem = function(item) {
            $scope.items.push(item);
            $scope.item = {};
        }

        $scope.totalPrice = function(){
            var total = 0;
            for(count=0;count<$scope.items.length;count++){
                total += $scope.items[count].Price*$scope.items[count].Quantity;
            }
            return total;
        }

        $scope.removeItem = function(index){
            $scope.items.splice(index,1);
        }
    }

This is the demo example code for adding data and deleting data using angularJS. I want to add one more button for updating items in the table for Updating Items in Shopping.html. On clicking updating button for each row ( as like Remove button in each row) I want the items in table (for that row for which we clicked Update button) comes in edit mode and Update button changes to Save button for that particular row. I want to do all this functionality using AngularJS and updation also with Two way binding (As in angularJS). Please help me to do the given functinality using full feautres of AngularJS. I searched many examples but unable to find so. Thanks and Regards, Gurpreet Singh

View Answers