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

Question

我是angularjs的新手，并且已经在问题中陷入困境.... 想要动态显示第三列中第二列的两列的一些计算。 ..ie假设用户在两列和三列中键入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个输入是由用户输入的值，最后一个是增加了两个。