I'm working on a Store project where you can add items to your cart, and in the cart you can increase or decrease the amount of items you want to have (quantity).
I am not able to access the quantity property and show it as a value in the cart.
My question is about how I am able to access this quantity property and display it.
I've added the code below which links to my question, I am also new to StackOverflow, so I apologise for any inconvenience I make with putting all the code into one Code Snippet.
// Here is the controller used for the cart HTML page.
app.controller('cartCtrl', function($scope, $rootScope) {
$scope.cartItems = $rootScope.cartItems;
$scope.decreaseValue = function() {
$rootScope.cartItems.Quantity--;
};
$scope.increaseValue = function() {
$rootScope.cartItems.Quantity++;
}
});
// Here is the controller used in the shop HTML page.
app.controller('shopCtrl', function($scope, $rootScope) {
$scope.shopItems = $rootScope.shopItems;
$scope.addToCart = function(item) {
var cItem = {
ID: item.ItemID,
Image: item.Image,
Name: item.Name,
Price: item.Price,
Quantity: 1
};
$rootScope.cartItems.push(cItem);
for (var i = 0; i < cItem.length; i++) {
if (cItem.ID[i] === item.ItemID) {
cItem.Quantity++;
}
}
}
});
// Here is the main script file to access routes and other global arrays/objetcs.
var app = angular.module('storeApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when('/', {
controller: 'homeCtrl',
templateUrl: 'templates/home.html'
}).when('/shop', {
controller: 'shopCtrl',
templateUrl: 'templates/shop.html'
}).when('/adminlogin', {
controller: 'adminCtrl',
templateUrl: 'templates/adminLogin.html'
}).when('/admin', {
controller: 'adminCtrl',
templateUrl: 'templates/admin.html'
}).when('/cart', {
controller: 'cartCtrl',
templateUrl: 'templates/cart.html'
}).when('/contact', {
controller: 'contactCtrl',
templateUrl: 'templates/contact.html'
});
});
app.run(function($rootScope) {
$rootScope.shopItems = [{
ItemID: 1,
Image: 'images/gmouse.jpg',
Name: 'Gaming Mouse',
Price: '200KR'
},
{
ItemID: 2,
Image: 'images/gkeyboard.jpg',
Name: 'Gaming Keyboard',
Price: '400KR'
},
{
ItemID: 3,
Image: 'images/gbackpack.jpg',
Name: 'Gaming Backpack',
Price: '300KR'
},
{
ItemID: 4,
Image: 'images/coke.jpg',
Name: 'Coke',
Price: '10KR'
},
{
ItemID: 5,
Image: 'images/chaitea.jpg',
Name: 'Indian Tea',
Price: '20KR'
}
];
$rootScope.cartItems = [];
});
app.controller('mainCtrl', function($scope, $location) {
$scope.indexNavMenu = "home";
$scope.onChangeNav = function(value) {
$scope.indexNavMenu = value;
$location.path(value);
};
});<!-- Here is my shop HTML page, where you add items to your cart. -->
<ul style="list-style-type: none;">
<div class="row">
<li ng-repeat="item in shopItems" class="col-sm-4">
<div>
<img ng-src="{{item.Image}}" class="img-thumbnail img-responsive shopimg" />
</div>
<div class="caption">
<h3>{{ item.Name }}</h3>
<h4>{{ item.Price }}</h4><button ng-click="addToCart(item)" class="btn btn-success">Add To Cart</button> <br /><br />
</div>
</li>
</div>
</ul>
<!-- Here is my cart HTML page, where you can see your selected items, their price, name, image and increase/decrease quantity. -->
<div class="content">
<div class="row col-sm-12">
<table>
<tr>
<th width="168" align="left">Item</th>
<th width="188" align="left">Description</th>
<th width="60" align="center">Quantity</th>
<th width="80" align="right">Price</th>
<th width="80" align="right">Total</th>
<th width="64"> </th>
</tr>
<tr ng-repeat="item in cartItems">
<td><img src="{{item.Image}}" /></td>
<td>{{item.Name}}</td>
<td align="center">
<form>
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" id="number" value="{{item.Quantity}}" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</form>
</td>
<td align="right">{{item.Price}}</td>
<td align="right">{{item.Total}}</td>
<td align="center"><br /><button ng-click="itemRemove()" class="btn btn-danger float-right">Remove</button> </td>
</tr>
<tr>
<td colspan="3">Have you modified item quantities?<button class="btn btn-link" ng-click="update()">Update</button> the Cart. </td>
<td align="right">
<h4>All Total:</h4>
</td>
<td align="right">
<h4>{{item.GrandTotal}}</h4>
</td>
<td> </td>
</tr>
</table>
<div class="cleaner h20"></div>
<div class="right"><button class="btn btn-success">checkout</button></div>
<div class="cleaner h20"></div>
<div class="blank_box">
</div>
</div>
</div>
<div class="cleaner"></div>EDIT: Changed value="{{item.cItem.Quantity}}" to value="{{item.Quantity}}". Value is still empty.
