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.sum = 0;
for (var i = 0; i < $scope.rows.length; ++i) {
    sum += sum + 1 + $scope.rows[i]; // add the value
}

然后，如果添加新行，则将新值添加到$ scope.sum并将该行添加到$ scope.rows

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

计算ng-repeat输入字段AngularJS中的和

1 个答案: