Updating using AngularJS

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

Ads









Related Tutorials/Questions & Answers:
Updating using AngularJS
Updating using AngularJS  Shopping.html <!DOCTYPE HTML PUBLIC...); } } This is the demo example code for adding data and deleting data using angularJS. I want to add... row. I want to do all this functionality using AngularJS and updation also
What are prerequisite for learning angularjs?
What are prerequisite for learning angularjs?  Hi, I have to learn angularjs for next project. What are prerequisite for learning angularjs? Thanks   Hi, What are the prerequisites for learning angularjs? Reply fast
Advertisements
Download and Install AngularJS
we have defined a controller in AngularJS using following code: <div ng...Download and Install AngularJS in a project As mentioned earlier Download and Install AngularJS is a JavaScript library which is used in a web application
coding for updating profile
coding for updating profile  coding for updating profile
AngularJS Hello World Program
AngularJS is to develop the program using the simple text editor or notepad...AngularJS Hello World Program - Create and run your first AngularJS example that prints Hello message The AngularJS is very popular front end development
updating & deleting an employee
updating & deleting an employee  can anyone help out me please? advance thanks warm regards
ModuleNotFoundError: No module named 'django-angularjs'
ModuleNotFoundError: No module named 'django-angularjs'  Hi, My... named 'django-angularjs' How to remove the ModuleNotFoundError: No module named 'django-angularjs' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'pybabel-angularjs'
ModuleNotFoundError: No module named 'pybabel-angularjs'  Hi, My... named 'pybabel-angularjs' How to remove the ModuleNotFoundError: No module named 'pybabel-angularjs' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'django-angularjs'
ModuleNotFoundError: No module named 'django-angularjs'  Hi, My... named 'django-angularjs' How to remove the ModuleNotFoundError: No module named 'django-angularjs' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'django-angularjs'
ModuleNotFoundError: No module named 'django-angularjs'  Hi, My... named 'django-angularjs' How to remove the ModuleNotFoundError: No module named 'django-angularjs' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'robotframework-angularjs'
ModuleNotFoundError: No module named 'robotframework-angularjs'  Hi...: No module named 'robotframework-angularjs' How to remove the ModuleNotFoundError: No module named 'robotframework-angularjs' error? Thanks  
writing angularjs hello world program
writing angularjs hello world program  Hi, I just started to learn the AngularJS framework. I want to learn it fast and looking for easy to learn... World program in AngularJS. Searching for simple example for writing angularjs
Updating multiple value depending on checkboxes
Updating multiple value depending on checkboxes  Hi .. I want to Update the multiple values of database using checkboxes and want to set the session for selected checkboxes..? please answer if any one knows as soon as possible
AngularJS Tutorials
AngularJS frontend framework Tutorials In this section we are going to provide you easy to learn and try tutorials of popular AngularJS framework which... are experienced web developer then you can learn AngularJS in just 2-4 days
Updating user profile
Updating user profile  how should i provide user to update his profile with edit option including entered data by user should be shown in jsp page fileds   The given code retrieve data from database and display
Update Records using Prepared Statement
for updating the records. In this JDBC tutorial we are going to learn about the process of updating the records by using the PreparedStatement.  Here arise... Update Records using Prepared Statement   
Updating from MySQL 5.0 to 5.5 cPanel
Updating from MySQL 5.0 to 5.5 cPanel   Updating from MySQL 5.0 to 5.5 cPanel
Maven dependency for org.webjars - angularjs version 1.8.2 is released. Learn to use angularjs version 1.8.2 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.8.2 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.8.2. Developer can use this version
Maven dependency for org.webjars - angularjs version 1.6.1 is released. Learn to use angularjs version 1.6.1 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.6.1 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.6.1. Developer can use this version
Maven dependency for org.webjars - angularjs version 1.0.3 is released. Learn to use angularjs version 1.0.3 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.0.3 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.0.3. Developer can use this version
Maven dependency for org.webjars - angularjs version 1.2.26 is released. Learn to use angularjs version 1.2.26 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.2.26 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.2.26. Developer can use this version
Maven dependency for org.webjars - angularjs version 1.5.11 is released. Learn to use angularjs version 1.5.11 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.5.11 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.5.11. Developer can use this version
Maven dependency for org.webjars - angularjs version 1.2.13 is released. Learn to use angularjs version 1.2.13 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.2.13 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.2.13. Developer can use this version
Maven dependency for org.webjars - angularjs version 1.7.2 is released. Learn to use angularjs version 1.7.2 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.7.2 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.7.2. Developer can use this version
Maven dependency for org.webjars - angularjs version 1.6.0 is released. Learn to use angularjs version 1.6.0 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.6.0 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.6.0. Developer can use this version
Maven dependency for org.webjars - angularjs version 1.2.20 is released. Learn to use angularjs version 1.2.20 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.2.20 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.2.20. Developer can use this version
Maven dependency for org.webjars - angularjs version 1.4.4 is released. Learn to use angularjs version 1.4.4 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.4.4 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.4.4. Developer can use this version
Maven dependency for org.webjars - angularjs version 1.4.0-rc.0 is released. Learn to use angularjs version 1.4.0-rc.0 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.4.0-rc.0 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.4.0-rc.0. Developer can use
Maven dependency for org.webjars - angularjs version 1.4.3-1 is released. Learn to use angularjs version 1.4.3-1 in Maven based Java projects
Maven dependency for  org.webjars  - Version 1.4.3-1 of angularjs released The developers of   org.webjars - angularjs project have... of  org.webjars - angularjs library is 1.4.3-1. Developer can use
Lock while inserting/updating database in multithreaded.
Lock while inserting/updating database in multithreaded.  Hi, I am... inserting/updating to database. I dont know what is the issue but it was never... am using ojdbc5.jar for jdbc connection. Please help me out, its killing me
Starting MySQL.. ERROR! The server quit without updating PID file
Starting MySQL.. ERROR! The server quit without updating PID file  I...: Starting MySQL.. ERROR! The server quit without updating PID file (/var/lib... on disk using following command: fdisk -h and found there is no space

Ads