Cart calculations in AngularJS - angularjs

Question

I'm just starting out with AngularJS attempting to build a shopping cart.
Below is my code.
Items.html
<li id="{{item.id}}" ng-click="addItem(item)" class="menu-item" ng-repeat="item in items">
<span class="list-item-inner">
<span class="item-content">
<span class="vc-outer">
<span class="vc-inner">
<span class="list-item-title" style="color: #3F4B56; font-size: 1.1rem;"
ng-bind="item.name">
</span>
<span class="list-item-description" style="font-size: 0.9rem; color: #6B7781;" ng-bind="item.description">
</span>
</span>
</span>
</span>
</span>
<span class="item-price">
<span class="vc-outer">
<span class="vc-inner no-wrap"
ng-bind="'₦' + (item.price)"></span>
</span>
</span>
<span class="item-add"></span>
</li>
Cart.html
<li class="has-counter order-item" ng-class="{'has-modifier' : cart.length}" ng-repeat="item in cart">
<div class="counter-control-vertical is-editable">
<div class="controls"> <a href="" class="control ctrl-up" ng-click="incQty(item)" style="text-decoration: none;">
+
</a>
<a href="" class="control ctrl-down" ng-click="decQty(item)" style="text-decoration: none;">
–
</a>
</div>
</div>
<div class="oi-inner">
<div class="oi-details" ng-click="editModifiers(item)">
<div class="oi-quantity" ng-bind="(item.count) +'x'"></div>
<div class="oi-title" ng-bind="item.name"></div>
<div class="oi-modifiers"></div>
</div>
<div class="oi-price" ng-bind="'₦' + (item.price)"></div> ×
</div>
</li>
Cart.js
// Array containing my items.
$scope.itemData = <? php echo json_encode($item_array); ?> ;
$scope.cart = [];
$scope.deleteItem = function (item) {
var cart = $scope.cart;
var match = getMatchedCartItem(item);
if (match.count > 0) {
cart.splice(cart.indexOf(item));
return;
}
}
$scope.addItem = function (item) {
var match = getMatchedCartItem(item);
if (match) {
match.count += 1;
return;
}
var itemToAdd = angular.copy(item);
itemToAdd.count = 1;
$scope.cart.push(itemToAdd);
}
$scope.incQty = function (item) {
var match = getMatchedCartItem(item);
if (match) {
match.count += 1;
return;
}
}
$scope.decQty = function (item) {
var cart = $scope.cart;
var match = getMatchedCartItem(item);
if (match.count > 1) {
match.count -= 1;
return;
}
cart.splice(cart.indexOf(item), 1);
}
At the moment I can add, remove, increment and decrement items in the cart array and display them in realtime. But the price does not change based on qty.
My question is;
How can I calculate and display price based on qty of an item in cart?
How do I calculate total price of all the items in the cart array?

Answer 1

ng-bind="item.price * item.count"
I would call a function (witch calculates the total price) every time you change the cart and store the result in an new variable.
$scope.calcTotal = function() {
var total=0;
for (var i = 0, max = $scope.cart.length; i < max; i++) {
total += $scope.cart[i].price * $scope.cart[i].count;
}
$scope.total = total;
}