CODEWITHSUNDEEP
javascriptangularjssum
Chinmay235
Chinmay235

Reputation: 3414

How to SUM price inside the angularjs view page?

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?

Upvotes: 1

Views: 498

Answers (5)

kaushlendras
kaushlendras

Reputation: 220

<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;
    }

Upvotes: -2

rishabh dev
rishabh dev

Reputation: 1743

$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>

Upvotes: 1

Mistalis
Mistalis

Reputation: 18279

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>

Upvotes: 0

Leonardo Chaia
Leonardo Chaia

Reputation: 2835

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}}

Upvotes: 2

Irfan Muhammad
Irfan Muhammad

Reputation: 814

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>

Upvotes: 0

Related Questions