Calculate sum in ng-repeat input fields AngularJS

Question

I'm trying to calculate the sum of the input fields in ng-repeat. Is there an easy way to display each row dynamically using ng-repeat and display the sum of it all as well?

Thanks for your help! I really appreciate it!

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

miquelarranz · Accepted Answer · 2016-06-14 15:44:25Z

1

I don't understand your request at all but if but I think that you mean the sum of the expenses right? So you should, in your controller, calculate the initial sum:

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

And then if you add a new row, then add the new value to $scope.sum and add the row to $scope.rows

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

answered Jun 14, 2016 at 15:44

miquelarranz

90411 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tiffsaw Over a year ago

Thanks @miquelarranz. I was wondering if there's a way to add dynamically each expense field (Mortgage/Rent) with ng-repeat and also add the sum of all expense fields in the total. Right now, it's working but when I add new expense fields when clicking on Add items btn, the value of these new expense fields doesn't get added to the total. Does this make sense?

miquelarranz Over a year ago

Because you are calculating it with JQuery and I think this is not going to work because the JQuery code is being executed when the document it's loaded (only once). Why aren't you doing the sum inside your controller as I wrote above? If you want to display the rows using ng-repeat you have to have an array with the rows information and then use ng-repeat="row in rows". An example of rows could be: [{name: 'Row 1', amount: 123}, {name: 'Row 2}, amount: 321]. And then in each row you display the name and the value or whatever you want to display.

Collectives™ on Stack Overflow

Calculate sum in ng-repeat input fields AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related