CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
Divyansh Chowdhary
Divyansh Chowdhary

Reputation: 3

Calculate the total of prices in angularjs

I am newbie in Angular. I am trying to print the gross total of the products in the bill. While calculating the product total, the value of qty is given by the user. The code for calculating product total is working fine but when I am calculating the gross total, it takes the default value as 1 only and not the value given by the user.

The server is responding with the product details like code, name, price, and gst.The quantity is entered by user.

I searched, but everywhere the quantity was coming from server's response.

Here is my code for billPage:

    <body>
<div class="container" ng-controller="billCtrl">
    <h1>Billing Section</h1>
    <input class="form-control" ng-model="search"><br>
    <button class="btn btn-primary" ng-click="searchProduct(search)">Search Product</button>
    <table class="table">
        <thead>
            <tr>
                <th>Product Code</th>
                <th>Product Name</th>
                <th>Product Price</th>
                <th>GST(%)</th>
                <th>Quantity</th>
                <th>Product Total</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in billing" ng-init="model = [{qty:1}]">
                <td>{{product.code}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price}}</td>
                <td>{{product.gst}}</td>
                <td><input type="number" ng-model="model[$index].qty" ng-required class="form-control"></td>
                <td>{{(product.price+(product.gst*product.price/100)) * model[$index].qty }}</td>
            </tr>
            <tr>
                <td colspan="5" style="text-align:right">Gross Total</td>
                <td>{{total()}}</td>
            </tr>
        </tbody>
    </table>
</div>

Code for BillCtrl.js

 var myApp = angular.module('myApp', ["ngRoute"]);

 myApp.controller('billCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from bill");
$scope.billing = [];
$scope.searchProduct = function(id) {
    console.log("search");
    $http.get('/billing/' + id).success(function(response) {
        $scope.billing.push(response[0]);
    });
}

$scope.total = function() {
    console.log($scope.model[0].qty);
    var total = 0;
    angular.forEach($scope.billing, function(product) {
        total += (product.price + (product.price * product.gst / 100)) * $scope.model.qty;
    })
    console.log(total);
    return total;
}
  }])

Upvotes: 0

Views: 2404

Answers (1)

Nishanth
Nishanth

Reputation: 835

You can have the total logic in UI and addup the total in controller

Here is the working example

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
  <script>
    (function() {

      angular.module("testApp", ['ui.bootstrap']).controller('billCtrl', ['$scope', '$http', function($scope, $http) {
        console.log("Hello World from bill");
        $scope.model = undefined;
        $scope.billing = [];
        $scope.searchProduct = function(id) {
            console.log("search");
            /*$http.get('/billing/' + id).success(function(response) {
                $scope.billing.push(response[0]);
            });*/
            
            $scope.billing = [{"code":"a1","name":"a1","price":100,"gst":0.1},{"code":"a2","name":"a2","price":200,"gst":0.2},{"code":"a3","name":"a3","price":300,"gst":0.3},{"code":"a4","name":"a4","price":400,"gst":0.4}];
        }
        
        $scope.total = function() {
            //console.log($scope.model[0].qty);
            var total = 0;
            angular.forEach($scope.billing, function(product, index) {
                total += product.total;
            })
            console.log(total);
            return total;
        }
      }]);


    }());
  </script>
  <style></style>
</head>

<body ng-app="testApp">
  <div class="container" ng-controller="billCtrl">
    <h1>Billing Section</h1>
    <input class="form-control" ng-model="search"><br>
    <button class="btn btn-primary" ng-click="searchProduct(search)">Search Product</button>
    <table class="table">
        <thead>
            <tr>
                <th>Product Code</th>
                <th>Product Name</th>
                <th>Product Price</th>
                <th>GST(%)</th>
                <th>Quantity</th>
                <th>Product Total</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in billing" ng-init="model = [{qty:1}];">
                <td>{{product.code}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price}}</td>
                <td>{{product.gst}}</td>
                <td><input type="number" ng-model="model[$index].qty" ng-required class="form-control"
                ng-change="product.total = model[$index].qty?(product.price+(product.gst*product.price/100)) * model[$index].qty:0"
                ng-init="product.total = model[$index].qty?(product.price+(product.gst*product.price/100)) * model[$index].qty:0"></td>
                <td>{{product.total}}</td>
            </tr>
            <tr>
                <td colspan="5" style="text-align:right">Gross Total</td>
                <td>{{total()}}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>

</html>

Upvotes: 1

Related Questions