shinta shinta - 9 days ago 7
AngularJS Question

Calculate Total Value Dynamically in angular

I have this list of products as json object

[
{
"id": 22565423428,
"title": "SV 8GB USB Flash Memory E100",
"imageUrl": "/images/22565423428.png",
"url": "/products/22565423428",
"prices": [
{
"amount": 159.92,
"currency": "SEK"
}
]
},
{
"id": 22565423394,
"title": "Litware Wireless Mouse M35",
"imageUrl": "/images/22565423394.png",
"url": "/products/22565423394",
"prices": [
{
"amount": 239.6,
"currency": "SEK"
}
]
}
]


and this is my ng-repeat code

<ul>
<li class="basket-item" ng-repeat="product in products">
<div class="product-item-image">
<img src={{product.imageUrl}} />
</div>
<div class="product-item-description">
<h2><a href="product.html">{{product.title}}</a></h2>
<a href="#">Description</a>
</div>
<div class="product-item-qtn">
<input type="number" name=quantity ng-model="quantity" ng-init="quantity = 0"> st
<p><b>quantiy</b>1-3</p>
</div>
<p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p>
<p class="product-item-total" >{{product.prices[0].amount * quantity}}</p>
</li>
</ul>


Total amount is changeable when user change the quantity.

Is there any way to get the total amount in all products dynamically?

<span>{{totalAmount}}</span>

Answer

I whipped up a quick example based on your code.

Two things:

  1. Use product.quantity instead of just quantity.

  2. See the controller function calcTotal() to calulate the total.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Products</title>
    <!-- AngularJS -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">

<div ng-controller="MyCtrl">

    <ul>
        <li class="basket-item" ng-repeat="product in products">
            <div class="product-item-image">
                <img src={{product.imageUrl}} />
            </div>
            <div class="product-item-description">
                <h2><a href="product.html">{{product.title}}</a></h2>
                <a href="#">Description</a>
            </div>
            <div class="product-item-qtn">
                <input type="number" name=quantity ng-model="product.quantity" ng-init="product.quantity = 0"> st
                <p><b>quantiy</b>1-3</p>
            </div>
            <p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p>
            <p class="product-item-total" >{{product.prices[0].amount * product.quantity}}</p>
        </li>
    </ul>

    <h1>Total: {{calcTotal()}}</h1>

</div>

<script>
    var app = angular.module('myApp',[]);

    app.controller('MyCtrl', ['$scope', function($scope) {
        $scope.products= [
            {
                "id": 22565423428,
                "title": "SV 8GB USB Flash Memory E100",
                "imageUrl": "/images/22565423428.png",
                "url": "/products/22565423428",
                "prices": [
                    {
                        "amount": 159.92,
                        "currency": "SEK"
                    }
                ]
            },
            {
                "id": 22565423394,
                "title": "Litware Wireless Mouse M35",
                "imageUrl": "/images/22565423394.png",
                "url": "/products/22565423394",
                "prices": [
                    {
                        "amount": 239.6,
                        "currency": "SEK"
                    }
                ]
            }
        ];

        $scope.calcTotal= function(){
            $scope.total = $scope.products.reduce(function(totalCost, product) {
                return totalCost + product.quantity*product.prices[0].amount;
            }, 0);
            return $scope.total;
        }
    }]);

</script>
</body>
</html>

Comments