bing
Flat 10% & upto 50% off + Free additional Courses. Hurry up!

AngularJS Application

 

Here we are creating a shopping Cart Application and code for this application is as follows:

<html ng-app='scartApp'>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<title>Shopping Cart</title>

</head>

<body ng-controller='SCartController'>

<h1>Shopping Cart Application</h1>

<div>

<table border = "1">

<tr>

<td><b>Product Name</b></td>

<td><b>Quantity</b></td>

<td><b>Price</b></td>

<td><b>Total Price</b></td>

<td><b>Operation</b></td>

</tr>

<tr ng-repeat="item in items">

<td>{{item.Name}}</td>

<td><input ng-model='item.quantity'></td>

<td>{{item.price | currency}}</td>

<td> {{item.price * item.quantity | currency}}</td>

<td><button ng-click="remove($number)">Remove</button></td>

</tr>

</table>

</div>

<script>

var sapp = angular.module('scartApp', []);

sapp.controller('SCartController', ['$scope', function($scope) {

$scope.items = [

{Name: 'Saree', quantity: 10, price: 100},

{Name: 'Mojari', quantity: 12, price: 40},

{Name: 'Bangles', quantity:8, price: 15},

{Name: 'Jeans', quantity:5, price: 20}

];

$scope.remove = function(number) {

$scope.items.splice(number, 1);

}

}]);

</script>

</body>

</html><button ng-click="remove($index)">Remove</button>

</div>

<script src="angular.js"></script>

<script>

function CartController($scope) {

$scope.items = [

{title: 'Paint pots', quantity: 8, price: 3.95},

{title: 'Polka dots', quantity: 17, price: 12.95},

{title: 'Pebbles', quantity: 5, price: 6.95}

];

$scope.remove = function(index) {

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

}

}

</script>

</body>

</html>

Output

o22

 

Explanation:

  • <html ng-app> – It tells Angular which parts of the page it should handle.
  • <body ng-controller=’CartController’> – SCartController will handle everything between <body> and </body>.
  • <tr ng-repeat=”item in items”> – It creates an array of item.
  • <td>{{item.Name}}</td> – Display Product Name
  • <td><input ng-model=’item.quantity’></td> – The ng-model makes data binding between the input field and the value of quantity.
  • <td>{{item.price | currency}}</td> – Display the price of item in $ using currency tag.
  • <td> {{item.price * item.quantity | currency}}</td> – It displays the total price of the item which is the multiplication of price and quantity.
  • <button ng-click=‘remove ($index)’>Remove</button> – Creates a button remove. It will remove the item if you click on this button.
  • function SCartController($scope) { } – Manages the logic of this application.
  • $scope.items = [ ]; – It defines the collection of item for your shopping cart application.

"0 Responses on AngularJS Application"

Training in Cities

Bangalore, Hyderabad, Chennai, Delhi, Kolkata, UK, London, Chicago, San Francisco, Dallas, Washington, New York, Orlando, Boston

100% Secure Payments. All major credit & debit cards accepted Or Pay by Paypal.

top

Sales Offer

  • To avail this offer, enroll before 05th December 2016.
  • This offer cannot be combined with any other offer.
  • This offer is valid on selected courses only.
  • Please use coupon codes mentioned below to avail the offer
offer-june

Sign Up or Login to view the Free AngularJS Application.