CODEWITHSUNDEEP
angularjs
Jayrex
Jayrex

Reputation: 245

How to get the Total value in column in angularjs?

I'm new to angularjs. How to get the total amount in the table Total Amount column and display in input textbox? I think this plunker can solve my problem but I can't access it now. http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview

Here is my table sample

enter image description here

<table>
                <thead>
                    <tr>

                        <th>Product</th>
                        <th>Quantity</th>
                        <th>Total Amount</th>


                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="payment_queue in data | filter:searchFilter">

                        <td>{{payment_queue.product_name}}</td>
                        <td>{{payment_queue.sold_quantity}}</td>
                        <td>{{payment_queue.amount}}</td>

                    </tr>
                </tbody>
            </table>

Total Amount: <input type="text value=""> <--- the total amount value goes here...

js

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



                    $scope.data=[];

                    $http.get("../php/paymentQueuedata.php")
                        .success(function(data){
                            $scope.data = data;
                        })
                        .error(function() {
                            $scope.data = "error in fetching data";
                        });

         }]);

php json

    <?php
    //database settings
    $connect = mysqli_connect("localhost", "root", "", "rmsdb");

    $result = mysqli_query($connect, "select * from payment_queue");


$data = array();

while ($row = mysqli_fetch_array($result)) {
  $data[] = $row;
}
    print json_encode($data);
?>

Upvotes: 3

Views: 18657

Answers (3)

Aaron Queenan
Aaron Queenan

Reputation: 911

There a way to get the totals without using a function.

Just use ng-init. If you need to allow the list to change or be filtered, use ng-repeat with it to force recalculation of the totals.

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Ext</th>
    </tr>
  </thead>
  <tbody ng-repeat="_ in [ [ search, products ] ]" ng-init="total = 0">
    <tr ng-repeat="product in products | filter: search">
      <td>{{ product.name }}</td>
      <td>{{ product.quantity }}</td>
      <td>{{ product.price }}</td>
      <td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
    </tr>
    <tr>
      <td><b>Total</b></td>
      <td></td>
      <td></td>
      <td><b>${{ total }}</b></td>
    </tr>
  </tbody>
</table>

See http://plnkr.co/edit/dLSntiy8EyahZ0upDpgy?p=preview for a workinig example.

Upvotes: 5

moni123
moni123

Reputation: 165

You can do like this. This is good solution for your problem.

index.html

 <!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    <table class="table table-striped">
        <tbody>
            <tr ng-repeat="item in items">
                <td>{{item.name}}</td>
                <td>{{item.years}}</td>
                <td>{{item.amount}}</td>
                <td>{{item.interest}}%</td>
            </tr>
            <tr>
                <td>Total:</td>
                <td>{{getTotal('years')}}</td>
                <td>{{getTotal('amount')}}</td>
                <td>{{getTotal('interest')}}</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

$scope.items = [
    {name: 'xxx', amount: 13, years: 3, interest: 2},    
    {name: 'yyy', amount: 23, years: 4, interest: 3},
    {name: 'zzz', amount: 123, years: 4, interest: 4}
];

$scope.getTotal = function(int) {
    var total = 0;
    angular.forEach($scope.items, function(el) {
        total += el[int];
    });
    return total;
};
});

you can use this url also. Thank you !!! http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview

Upvotes: 0

Jayrex
Jayrex

Reputation: 245

My solution to my problem..

in my controller

$scope.totalAmount = function(){
            var total = 0;
            for(count=0;count<$scope.data.length;count++){
                total += parseInt($scope.data[count].total_amount,10);
            }
            return total;
        };

in html

<table>
                <thead>
                    <tr>

                        <th>Product</th>
                        <th>Quantity</th>
                        <th>Total Amount</th>


                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="payment_queue in data | filter:searchFilter">

                        <td>{{payment_queue.product_name}}</td>
                        <td>{{payment_queue.sold_quantity}}</td>
                        <td>{{payment_queue.amount}}</td>

                    </tr>
                </tbody>
            </table>

Total Amount: <input type="text value="{{ totalAmount() }}"> <--- the total amount value goes here...

Upvotes: 0

Related Questions