ng-repeat 입력 필드에서 합계 계산 AngularJS

Question

ng-repeat에서 입력 필드의 합을 계산하려고합니다. ng-repeat를 사용하여 각 행을 동적으로 표시하고 그 합계를 모두 표시하는 쉬운 방법이 있습니까?

도움 주셔서 감사합니다. 정말 감사!

HTML

 <div class="row"> 

      <div class="small-12"> 

       <div class="outreach-bar"> 

        <div class="outreach-bar__headline"><h1><span class="icon-pie-chart"></span>Current Total - $<span class="js-form--outreach__step-total">0</span></h1></div> 

         <div class="outreach-bar__section-wrap outreach-bar__progress"> 
         </div><!--/.outreach-bar__section-wrap --> 

       </div><!--/.outreach-bar --> 

      </div><!--/.col --> 

     </div><!--/.row --> 

     <div class="carousel--outreach__title"><h1>Step 1 - Home</h1></div> 

     <div class="form--outreach" ng-controller="AddController"> 

      <div class="row"> 

       <div class="small-12 columns"> 

        <div class="form--outreach__step-title">Current Total - $<span class="js-form--outreach__step-total">0</span></div> 
        <div class="form--outreach__step-intro">Enter your monthly home expenses below to see how much you spend each month.</div> 

       </div><!--/.col --> 

      </div><!--/.row--> 

      <div class="row" > 

       <div class="small-6 columns"> 

        <div class="form--outreach__input-label">Mortgage/Rent</div> 

        <input type="number" class="form--outreach__input js-form--outreach__input" placeholder="Enter Amount"/> 

       </div><!--/ .col --> 

       <div class="small-6 columns"> 

        <div class="form--outreach__input-label">Mortgage/Rent</div> 

        <input type="number" class="form--outreach__input js-form--outreach__input" placeholder="Enter Amount"/> 

       </div><!--/ .col --> 

      </div><!--/ .row --> 

      <div class="row" ng-repeat="rowContent in rows"> 

       <div class="small-6 columns"> 

        <div class="form--outreach__input-label">Mortgage/Rent</div> 

        <input type="number" class="form--outreach__input js-form--outreach__input" placeholder="Enter Amount"/> 

       </div><!--/ .col --> 

      </div><!--/ .row --> 

      <div class="row"> 

       <div class="small-12 columns"> 

        <div class="form--outreach__add-wrap"> 
         <a class="form--outreach__add-plus" ng-click="addRow()"></a> 
         <h2>Add Items</h2> 
        </div><!-- form--outreach__add-wrap --> 

       </div><!--/.col --> 

      </div><!--/.row--> 

     </div><!--/ .form--outreach --> 

    </div><!--/.carousel--outreach__step --> 

[...]

$(document).on('ready', function() { 
    $('input.js-form--outreach__input').on('input', function(){ 
    var sum=0; 
    $('input.js-form--outreach__input').each(function(){ 
     if($(this).val() != "") 
      sum += parseInt($(this).val()); 
    }); 

    $('.js-form--outreach__step-total').html(sum); 

    });// end of sum functionality 
}); 


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

    app.controller('AddController', ['$scope', function ($scope) { 
     $scope.rows = ['Row']; 

     $scope.counter = 1; 

     $scope.addRow = function() { 

     $scope.rows.push('Row' + $scope.counter); 
     $scope.counter++; 
    } 

}]);// end of add row functionality 

Answer 1

나는 모든하지만 경우에 귀하의 요청을 이해하지 않습니다하지만 난 당신이 바로 비용의 합을 의미한다고 생각? $ scope.rows

에

$scope.sum = 0; 
for (var i = 0; i < $scope.rows.length; ++i) { 
    sum += sum + 1 + $scope.rows[i]; // add the value 
} 

그리고 당신은 새 행을 추가하는 경우 다음, 다음 $ scope.sum에 새 값을 추가하고 추가 행 : 그래서 당신은, 당신의 컨트롤러, 초기 합계를 계산한다

$scope.addRow = function() { 
    $scope.rows.push('Row' + $scope.counter); 
    ++$scope.counter; 
    $scope.sum = sum + $scope.newValue; 
}