I'm trying to create a Cart using Angular JS Service. This service is
called UserCart. The UserCart service consists of two variables, one to
maintain the total cart value, other to store the items added in the cart.
It additionally contains two functions to add or remove an item in the cart.
The UserCart service returns an object which has the two functions
(add/remove product) and the total cart value.
In the View (html code at end), there is 'Add to Cart' button for each of
the product (currently a shirt and a wine), which when clicked should call
the ProductController's function 'addToCart', which should then update the
UserCart's total_cart_val (And it does that as I confirmed from the console
logs). However, the value is not reflecting in the HTML.
Is there any obvious issue with the code?
UserCart.js below:
-------------------------
(function() {
// Get reference to the app
var app = angular.module("jargoViewer");
// Create the factory that share the User Cart with various controllers
app.factory('UserCart', function(){
var cart_items = [];
var total_cart_val = 0;
var addProductInCart = function(prodID, prodCostPerUnit, prodQuantity) {
if((prodID in cart_items)) {
// true if "prodID" exist in cart_items
// Add the new prodID key element now
prodObj = cart_items[prodID];
prodObj.Quantity = prodObj.Quantity + prodQuantity;
} else {
// A product with same key already exists
cart_items[prodID] = {
'Quantity' : prodQuantity,
'CostPerUnit' : prodCostPerUnit
};
}
// Add the total newly added products cost to Total Cart Value
total_cart_val += prodCostPerUnit * prodQuantity;
}
var removeProductInCart = function(prodID, prodQuantity) {
if((prodID in cart_items)) {
// true if "prodID" exist in cart_items
// Add the new prodID key element now
prodObj = cart_items[prodID];
existingQuantity = prodObj.Quantity;
if(prodQuantity > existingQuantity) {
alert('No more of this item exists in the cart!');
} else {
prodObj.Quantity = prodObj.Quantity - prodQuantity;
// Add the total newly added products cost to Total Cart
Value
total_cart_val -= prodCostPerUnit * prodQuantity;
if(prodObj.Quantity < 1) {
// No more of this product left in cart, remove from
cart list
cart_items.splice(prodID, 1);
}
}
} else {
// Error
alert('No more of this item exists in the cart!');
}
}
// Return the Interface of UserCart
return {
// products_in_cart: cart_items,
cart : {
cart_val : total_cart_val
},
addProdInCart : addProductInCart,
delProdInCart : removeProductInCart
};
});}());
My ProductController.js is like this
---------------------------------------
(function() {
var app = angular.module("jargoViewer");
//var ProductController = function($scope) {
var ProductController = function($scope, UserCart) {
$scope.addToCart = function(prodID, costPerUnit, quantity) {
UserCart.addProdInCart(prodID, costPerUnit, quantity);
}
$scope.products = [
{
'title' : 'First Product',
'id' : 100001,
'img' : 'product/shirt.jpg',
'cost' : 899,
'sizes' : [
{
'label' :'Small'
},
{
'label' :'Medium'
}
]
},
{
'title' : 'Second Product',
'img' : 'product/wine.png',
'id' : 100002,
'cost' : 3150,
'sizes' : [
{
'label' :'Small'
},
{
'label' :'Large'
}
]
}
];
$scope.userCart = UserCart.cart;
};
app.controller("ProductController", ProductController);
}());
My View is as follows.
-------------------------
<section class="big-product">
<div class="container">
<div class="row top30" ng-repeat="prod in products">
<span> </span>
<div>
<div class="col-sm-4 product">
<!--<img src="product/shirt.jpg" alt="t-shirt"
class="img-responsive">-->
<img src="{{prod.img}}" alt="t-shirt"
class="img-responsive">
</div>
<div class="col-sm-8 info">
<div class="info-wrapper" >
<h2>{{prod.title}}</h2>
<p class="lead">
{{prod.desc}}
</p>
<ul class="list-inline">
<li>
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
Size
<span class="caret"></span>
</button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li role="presentation"
ng-repeat="prop in prod.sizes"><a role="menuitem" tabindex="-1"
href="#">{{prop.label}}</a></li>
<!--<li
role="presentation"><a role="menuitem" tabindex="-1" href="#">Medium</a></li>
<li role="presentation"><a
role="menuitem" tabindex="-1" href="#">Large</a></li>-->
</ul>
</div>
</li>
<li>
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
Quantity
<span class="caret"></span>
</button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li role="presentation"><a
role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a
role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a
role="menuitem" tabindex="-1" href="#">3</a></li>
</ul>
</div>
</li>
<li class="currency">
{{prod.cost}}
</li>
<li class="Total Cart Value">
{{userCart.cart_val}}
</li>
</ul>
</div>
<a class="btn btn-success btn-unique" ng-click =
"addToCart(prod.id, prod.cost, 1)">Add to Cart<i class="icon-cart-1"></i></a>
</div>
</div>
<span> </span>
</div>
</div>
</section>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
