How to SUM price inside the angularjs view page?

Question

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {

    $scope.total_amount = 0;
    
    $scope.books = [
      {id:1, name:'Book1', 'price':120},
      {id:2, name:'Book2', 'price':199},
      {id:3, name:'Book3', 'price':135}
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
<h2>Book Listing</h2>
<div ng-controller="QaController">
   <!--<strong>Total Price : {{total_amount | currency}}</strong>-->
  <hr />
   <div ng-repeat="book in books" ng-init="total_amount = book.price + total_amount">
       Name : {{book.name}} <br />
       Price : {{book.price}}<hr />
   </div>
   <strong>Total Amount: {{total_amount | currency}}</strong>
</div>
</body>

I have posted my sample code. I want to sum total amount of price of my all books. Please check code snippet I have initialize my total_amount but my total_amount is showing $0.00 actually my sum amount is $454.00 please tell me how to SUM my books prices and show the result in view page?

Why you are not performing these calculations in controller and then bind that scope variable on view?? — kaushlendras
– kaushlendras, Commented Apr 5, 2017 at 13:15

Leonardo Chaia · Accepted Answer · 2017-04-05 13:20:14Z

A good way of doing it is using an AngularJS Filter. For example:

angular.module('test.module', [])
    .filter('sum', function() {
        return function(data) {
            if (angular.isUndefined(data)) {
                return 0;
            }

            var sum = 0;
            for (var i = 0; i < data.length ; i++) {
                sum += parseInt(data[i]['price']);
            }

            return sum;
        };
    });

You'd use it like: {{books | sum}}

To make it more generic, you could also pass the property by which you want to sum:

angular.module('test.module', [])
    .filter('sum', function() {
        return function(data, key) {
            if (angular.isUndefined(data) || angular.isUndefined(key)) {
                return 0;
            }

            var sum = 0;
            for (var i = 0; i < data.length ; i++) {
                sum += parseInt(data[i][key]);
            }

            return sum;
        };
    });

You'd use it like: {{books | sum:'price'}}.

You can also add the currency filter: {{books | sum:'price' | currency}}

rishabh dev · Accepted Answer · 2017-04-05 13:27:55Z

1

$scope.total_amount is an integer value. A local copy is created and it does not refer to the scope variable declared in the controller.

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {

    $scope.bucket={total_amount: 0};
    
    $scope.books = [
      {id:1, name:'Book1', 'price':120},
      {id:2, name:'Book2', 'price':199},
      {id:3, name:'Book3', 'price':135}
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
<h2>Book Listing</h2>
<div ng-controller="QaController">
   <!--<strong>Total Price : {{total_amount | currency}}</strong>-->
  <hr />
   <div ng-repeat="book in books" ng-init="bucket.total_amount = (book.price + bucket.total_amount)">
       Name : {{book.name}} <br />
       Price : {{book.price}}<hr />
   </div>
   <strong>Total Amount: {{bucket.total_amount | currency}}</strong>
</div>
</body>

answered Apr 5, 2017 at 13:27

rishabh dev

1,7631 gold badge16 silver badges28 bronze badges

1 Comment

Chinmay235 Over a year ago

Thanks @rishabhdev.

Irfan Muhammad · Accepted Answer · 2017-04-05 13:17:00Z

I think you are looking for this solution

$scope.books.forEach(function(b){
      $scope.total_amount = $scope.total_amount+b.price;
    });

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {

    $scope.total_amount = 0;
    
    $scope.books = [
      {id:1, name:'Book1', 'price':120},
      {id:2, name:'Book2', 'price':199},
      {id:3, name:'Book3', 'price':135}
    ];
    
    $scope.books.forEach(function(b){
      $scope.total_amount = $scope.total_amount+b.price;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
<h2>Book Listing</h2>
<div ng-controller="QaController">
   <!--<strong>Total Price : {{total_amount | currency}}</strong>-->
  <hr />
   <div ng-repeat="book in books" ng-init="total_amount = book.price + total_amount">
       Name : {{book.name}} <br />
       Price : {{book.price}}<hr />
   </div>
   <strong>Total Amount: {{total_amount | currency}}</strong>
</div>
</body>

Mistalis · Accepted Answer · 2017-04-05 13:21:51Z

I would suggest to move this logic to the controller instead of doing it in ng-init.

An advantage is that this code is dynamic, total is not only calculate when the page starts.

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {

    $scope.total = function() {
        var total = 0;
        for(var i = 0; i < $scope.books.length; i++) {
            total += $scope.books[i].price;
        }
        return total;
    }
    
    $scope.books = [
      {id:1, name:'Book1', 'price':120},
      {id:2, name:'Book2', 'price':199},
      {id:3, name:'Book3', 'price':135}
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
<h2>Book Listing</h2>
<div ng-controller="QaController">
  <hr/>
   <div ng-repeat="book in books">
       Name : {{book.name}} <br />
       Price : {{book.price}}<hr />
   </div>
   <strong>Total Amount: {{total() | currency}}</strong>
</div>
</body>

kaushlendras · Accepted Answer · 2017-04-05 14:17:16Z

-2

<strong>Total Amount: {{getTotalAmount() | currency}}</strong>

    $scope.getTotalAmount = function(){
        var total = 0;
        for(var i = 0; i < $scope.books.length; i++){
            var product = $scope.books[i];
            total += product.price;
        }
        return total;
    }

edited Apr 5, 2017 at 14:17

answered Apr 5, 2017 at 13:19

kaushlendras

2201 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to SUM price inside the angularjs view page?

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related