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

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"

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

Sales Offer

  • To avail this offer, enroll before 28th July 2017.
  • 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.