在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個輸入是由用戶輸入的值，最後一個是增加了兩個。