Question

我是angularjs的新手，并且一直陷入困境...... 想要动态显示第三列中表格的两列计算...即。假设当用户在两列中键入10和20时，第三列应该动态填充为200（例如）。

请建议我如何在angularjs中实现这一点。

我正在使用ng-repeat来填充HTML中的简单表格。 HTML代码

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

我想在NoofNewCertificate和NoofDuplicateCertificate的基础上显示HeadAmount。一旦用户输入这些值，HeadAcount就会动态填充。

先谢谢的问候，

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

Answer 2

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

假设您的2个输入是用户输入的值，最后一个是两个输入。

动态显示angularjs中表格第三列中两列的总和

2 个答案: