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