dynamically show sum of tow columns in third column of table in angularjs

Question

I am new to angularjs, and have been stucked in a problem.... want to display some calculation of two columns of a table in third coluns dynamically...i.e. suppose when user types 10 and 20 in two columns then third column should be dynamically filled as 200(for example).

please suggest me how can I achieve this in angularjs.

I am using ng-repeat to populate simple table in HTML. HTML code is

<table class="table table-hover">
                                                    <thead>
                                                        <tr>
                                                            <th class="col-sm-1" style="text-align:center">S.No.</th>
                                                            <th class="col-sm-5" style="text-align:center">Certificate Name</th>
                                                            <th class="col-sm-1" style="text-align:center">No of New Certificate</th>
                                                            <th class="col-sm-1" style="text-align:center">No of Duplicate Certificate</th>
                                                            <th class="col-sm-1" style="text-align:center">Transcript Amount</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr ng-repeat="payment in TRAN_PaymentDetail">
                                                            <td class="col-sm-1" style="text-align:center">{{$index+1}}
                                                            </td>
                                                            <td class="col-sm-5">
                                                                <input type="text" disabled class="form-control" ng-model="payment.Title" required />
                                                            </td>
                                                            <td class="col-sm-1">
                                                                <input type="number" min="0" name="NewTranscript" class="form-control" ng-model="payment.NoofNewCertificate" />
                                                            </td> 
                                                            <td class="col-sm-1">
                                                                <input type="number" min="0" name="NewTranscript" class="form-control" ng-model="payment.NoofDuplicateCertificate" />
                                                            </td>  
                                                            <td class="col-sm-1">
                                                                <input type="text" readonly name="NewTranscript" class="form-control" ng-model="payment.HeadAmount" value="{{CalulateHeadAmount()}}" />
                                                            </td>                                                              
                                                        </tr>
                                                    </tbody>
                                                </table>

I want to show HeadAmount on the basis of NoofNewCertificate and NoofDuplicateCertificate. As soon as user enters these values HeadAcount should dynamically filled.

Thanks in Advance Regards,

you can look to my answer.. hope that works for you. Let me know does this solve your problem or required something else. — Chandra Prakash Variyani
– Chandra Prakash Variyani, Commented Nov 22, 2016 at 13:15

Chandra Prakash Variyani · Accepted Answer · 2016-11-22 13:29:21Z

1

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

myApp.controller('myCtrl', function ($scope) {

    $scope.Data = [{ "Col1": 1, "Col2": 1 }];


});


<div ng-app="myApp" ng-controller="myCtrl">

    <table class="table table-hover">
        <thead>
            <tr>
                <th class="col-sm-1" style="text-align:center">S.No.</th>

                <th class="col-sm-1" style="text-align:center">Col 1</th>
                <th class="col-sm-1" style="text-align:center">Col 2</th>
                <th class="col-sm-1" style="text-align:center">Sum</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="payment in Data">
                <td class="col-sm-1" style="text-align:center">
                    {{$index+1}}
                </td>
                <td class="col-sm-1">
                    <input type="number" min="0"  class="form-control" ng-model="payment.Col1" required />
                </td>
                <td class="col-sm-1">
                    <input type="number" min="0" name="NewTranscript" class="form-control" ng-model="payment.Col2" />
                </td>
                <td class="col-sm-1">
                    <input type="number" min="0" name="NewTranscript" class="form-control" ng-model="payment.Col1 + payment.Col2" />
                </td>

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

edited Nov 22, 2016 at 13:29

answered Nov 22, 2016 at 13:11

Chandra Prakash Variyani

1826 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user4676340 Over a year ago

Instead of promoting your Youtube channel, you could instead give an answer, just saying. And a filter isn't necessary at all, if I understood his question correctly.

Chandra Prakash Variyani Over a year ago

I was not promoting my video channel, i was just helping him. Though i have deleted.

user4676340 Over a year ago

Man, we can see what you edited. It's okay, you won't get banned, I won't report you either, but I'm just saying that you must avoid this kind of "help".

user4365176 Over a year ago

Thanks Chandra Prakash Variyani..... got the trick and now able to show calculated value in the cell of table

user4676340 · Accepted Answer · 2016-11-22 13:20:31Z

0

<tbody>
    <tr ng-repeat="payment in TRAN_PaymentDetail">
        <td class="col-sm-1" style="text-align:center">{{$index+1}}</td>
        <td class="col-sm-5">
            <input type="text" disabled class="form-control" ng-model="payment.Title" required />
        </td>
        <td class="col-sm-1">
            <input type="number" min="0" name="NewTranscript" class="form-control" ng-model="payment.NoofNewCertificate" />
        </td> 
        <td class="col-sm-1">
            <input type="number" min="0" name="NewTranscript" class="form-control" ng-model="payment.NoofDuplicateCertificate" />
        </td>  
        <td class="col-sm-1">
            <input type="text" readonly name="NewTranscript" class="form-control" ng-model="payment.HeadAmount" ng-value="payment.NoofNewCertificate * 1 + payment.NoofDuplicateCertificate * 1" />
        </td>                                                              
    </tr>
</tbody>

Assuming that your 2 inputs are the values entered by the user, and the last one is the addition of the two.

answered Nov 22, 2016 at 13:20

user4676340

2 Comments

user4365176 Over a year ago

Thanks trichetriche for your suggestion... I tried ng-value as well it worked also. but used ng-change on cells to compute the desired value and using ng-model to bind the value to show in the view. once again thanks..

user4676340 Over a year ago

No problem, remember to mark a valid answer as verified to help people who will have the same problem as you.

Collectives™ on Stack Overflow

dynamically show sum of tow columns in third column of table in angularjs

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related