index.html
<!DOCTYPE html>
<html lang="en" ng-app="myCartApp" ng-cloak>
<head>
<title>AngularJS Routing example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style>
body {
padding-top: 10px;
background-color: #F5F5F5;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<noscript>
<div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
</noscript>
</head>
<body ng-app="myCartApp" ng-controller="ProductController">
<div class="container-fluid outerdiv">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="span-style"> Shopping Cart</span></a>
</div>
</div>
</nav>
</div>
<br>
<br><br>
<br><br>
<div class="container" >
<input type = "text" class = "form-control" ng-model = "searchProduct">
<br><br>
<div class="row">
<ul class = "thumbnails list-unstyled">
<li class="col-md-3" ng-repeat="product in products | filter : searchProduct ">
<div class="thumbnail" style = "padding:0">
<div style="padding:4px">
<img class="img-rounded" style = "width : 100% "ng-src="{{product.product_image}}" alt="253x220" width="350" height="200" >
</div>
<div class="caption">
<h3>{{ product.product_name}}</h3>
<p>{{product.product_description}}</p>
<h4> {{ product.product_price | currency : "Rs. " }} </h4>
<button class="btn btn-primary btn-sm" ng-click = "addToCart(product);" ng-disabled = "product.disable" >Add to Cart</a>
</div>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail" style = "padding:0">
<div style="padding:4px">
</div>
<div class="caption">
<h3>SHOPPING CART</h3>
<table class = "table table-bordered" >
<thead>
<th> # </th>
<th> Product </th>
<th> Price </th>
<th> Action </th>
</thead>
<tbody>
<tr ng-repeat = "product in cart">
<td> {{ $index + 1}} </td>
<td > {{ product.product_name}} </td> <td > {{ product.product_price}} </td>
<td > <button class="btn btn-info btn-sm" ng-click = "removeItem(product)">X</button> </td>
</tr>
<tr>
<td class = "text-center" colspan = "2"> <strong > Total</strong> </td>
<td class = "text-center"colspan = "2"> <strong >{{getTotal() | currency : "Rs. " }} </strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div><!-- End row -->
</div><!-- End container -->
<br><br>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="ProductController.js"></script>
</body>
</html>
ProductController.js
var app = angular.module('myCartApp', [])
app.controller('ProductController', function ($scope, $http)
{
$scope.cart = [];
// Load products from server
$http.get('products.json').success(function (response) {
$scope.products = response.products;
});
$scope.addToCart = function (product) {
var found = false;
$scope.cart.forEach(function (item) {
if (item.id === product.product_id) {
item.quantity++;
found = true;
}
});
if (!found) {
$scope.cart.push(angular.extend({quantity: 1}, product));
var indexsam = $scope.products.indexOf(product);
$scope.products[indexsam].disable = true;
}
};
$scope.removeItem = function(product){
var indexsam = $scope.cart.indexOf(product);
$scope.cart.splice(indexsam,1);
$scope.products[indexsam].disable = false;
};
$scope.getTotal = function () {
var total = 0;
$scope.cart.forEach(function (product) {
total += product.product_price;
});
return total;
};
});
products.json
{"products": [
{
"product_id" : 1,
"product_name" : "Samsung Galaxy A8",
"product_description" : " The Samsung Galaxy A8 is powered by Snapdragon 3 Processor, Released in 2015, Features 1 GB RAM, 3 GB External Memory",
"product_image" : "images/j5.jpg",
"product_price" : 10000
},
{
"product_id" : 2,
"product_name" : "Moto G4 Plus",
"product_description" : " The Moto G4 Plus is powered by Snapdragon 4 Processor, Released in 2016, Features 2 GB RAM, 5 GB External Memory",
"product_image" : "images/MotoG4.jpg",
"product_price" : 20000
},
{
"product_id" : 3,
"product_name" : "Lenovo K3 Note",
"product_description" : " The Lenovo K3 Note is powered by Snapdragon 5 Processor, Released in 2017, Features 3 GB RAM, 10GB External Memory",
"product_image" : "images/lenovok3.jpg",
"product_price" : 33000
},
{
"product_id" : 4,
"product_name" : "Samsung J3 Plus",
"product_description" : " The Samsung J3 is powered by Snapdragon 3 Processor, Released in 2015, Features 1 GB RAM, 3 GB External Memory",
"product_image" : "images/j3.jpg",
"product_price" : 13000
},
{
"product_id" : 5,
"product_name" : "Moto Z Plus",
"product_description" : " The Moto z Plus is powered by Snapdragon 4 Processor, Released in 2016, Features 2 GB RAM, 5 GB External Memory",
"product_image" : "images/MotoZ.jpg",
"product_price" : 17000
},
{
"product_id" : 6,
"product_name" : "Moto E3 Plus",
"product_description" : " The Moto E3 Plus is powered by Snapdragon 4 Processor, Released in 2016, Features 2 GB RAM, 5 GB External Memory",
"product_image" : "images/j7.jpg",
"product_price" : 12000
},
{
"product_id" : 7,
"product_name" : "Samsung Galaxy Note",
"product_description" : " The Samsung Galaxy Note is powered by Snapdragon 3 Processor, Released in 2015, Features 1 GB RAM, 3 GB External Memory",
"product_image" : "images/note.jpg",
"product_price" : 50000
}
]}
Output:
<!DOCTYPE html>
<html lang="en" ng-app="myCartApp" ng-cloak>
<head>
<title>AngularJS Routing example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style>
body {
padding-top: 10px;
background-color: #F5F5F5;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<noscript>
<div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
</noscript>
</head>
<body ng-app="myCartApp" ng-controller="ProductController">
<div class="container-fluid outerdiv">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="span-style"> Shopping Cart</span></a>
</div>
</div>
</nav>
</div>
<br>
<br><br>
<br><br>
<div class="container" >
<input type = "text" class = "form-control" ng-model = "searchProduct">
<br><br>
<div class="row">
<ul class = "thumbnails list-unstyled">
<li class="col-md-3" ng-repeat="product in products | filter : searchProduct ">
<div class="thumbnail" style = "padding:0">
<div style="padding:4px">
<img class="img-rounded" style = "width : 100% "ng-src="{{product.product_image}}" alt="253x220" width="350" height="200" >
</div>
<div class="caption">
<h3>{{ product.product_name}}</h3>
<p>{{product.product_description}}</p>
<h4> {{ product.product_price | currency : "Rs. " }} </h4>
<button class="btn btn-primary btn-sm" ng-click = "addToCart(product);" ng-disabled = "product.disable" >Add to Cart</a>
</div>
</div>
</li>
<li class="col-md-3">
<div class="thumbnail" style = "padding:0">
<div style="padding:4px">
</div>
<div class="caption">
<h3>SHOPPING CART</h3>
<table class = "table table-bordered" >
<thead>
<th> # </th>
<th> Product </th>
<th> Price </th>
<th> Action </th>
</thead>
<tbody>
<tr ng-repeat = "product in cart">
<td> {{ $index + 1}} </td>
<td > {{ product.product_name}} </td> <td > {{ product.product_price}} </td>
<td > <button class="btn btn-info btn-sm" ng-click = "removeItem(product)">X</button> </td>
</tr>
<tr>
<td class = "text-center" colspan = "2"> <strong > Total</strong> </td>
<td class = "text-center"colspan = "2"> <strong >{{getTotal() | currency : "Rs. " }} </strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div><!-- End row -->
</div><!-- End container -->
<br><br>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="ProductController.js"></script>
</body>
</html>
ProductController.js
var app = angular.module('myCartApp', [])
app.controller('ProductController', function ($scope, $http)
{
$scope.cart = [];
// Load products from server
$http.get('products.json').success(function (response) {
$scope.products = response.products;
});
$scope.addToCart = function (product) {
var found = false;
$scope.cart.forEach(function (item) {
if (item.id === product.product_id) {
item.quantity++;
found = true;
}
});
if (!found) {
$scope.cart.push(angular.extend({quantity: 1}, product));
var indexsam = $scope.products.indexOf(product);
$scope.products[indexsam].disable = true;
}
};
$scope.removeItem = function(product){
var indexsam = $scope.cart.indexOf(product);
$scope.cart.splice(indexsam,1);
$scope.products[indexsam].disable = false;
};
$scope.getTotal = function () {
var total = 0;
$scope.cart.forEach(function (product) {
total += product.product_price;
});
return total;
};
});
products.json
{"products": [
{
"product_id" : 1,
"product_name" : "Samsung Galaxy A8",
"product_description" : " The Samsung Galaxy A8 is powered by Snapdragon 3 Processor, Released in 2015, Features 1 GB RAM, 3 GB External Memory",
"product_image" : "images/j5.jpg",
"product_price" : 10000
},
{
"product_id" : 2,
"product_name" : "Moto G4 Plus",
"product_description" : " The Moto G4 Plus is powered by Snapdragon 4 Processor, Released in 2016, Features 2 GB RAM, 5 GB External Memory",
"product_image" : "images/MotoG4.jpg",
"product_price" : 20000
},
{
"product_id" : 3,
"product_name" : "Lenovo K3 Note",
"product_description" : " The Lenovo K3 Note is powered by Snapdragon 5 Processor, Released in 2017, Features 3 GB RAM, 10GB External Memory",
"product_image" : "images/lenovok3.jpg",
"product_price" : 33000
},
{
"product_id" : 4,
"product_name" : "Samsung J3 Plus",
"product_description" : " The Samsung J3 is powered by Snapdragon 3 Processor, Released in 2015, Features 1 GB RAM, 3 GB External Memory",
"product_image" : "images/j3.jpg",
"product_price" : 13000
},
{
"product_id" : 5,
"product_name" : "Moto Z Plus",
"product_description" : " The Moto z Plus is powered by Snapdragon 4 Processor, Released in 2016, Features 2 GB RAM, 5 GB External Memory",
"product_image" : "images/MotoZ.jpg",
"product_price" : 17000
},
{
"product_id" : 6,
"product_name" : "Moto E3 Plus",
"product_description" : " The Moto E3 Plus is powered by Snapdragon 4 Processor, Released in 2016, Features 2 GB RAM, 5 GB External Memory",
"product_image" : "images/j7.jpg",
"product_price" : 12000
},
{
"product_id" : 7,
"product_name" : "Samsung Galaxy Note",
"product_description" : " The Samsung Galaxy Note is powered by Snapdragon 3 Processor, Released in 2015, Features 1 GB RAM, 3 GB External Memory",
"product_image" : "images/note.jpg",
"product_price" : 50000
}
]}
Output:
