CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Wouter
Wouter

Reputation: 41

AngularJS - How to loop over repeat items and make a calculation

Thanks for reading / helping. I'm a complete newbie trying to figure out AngularJS and building my first app with it. For this project I've created a table with textboxes (3 on a row). The data is filled by a Factory and the total per Row is calculated in the controller. This is all working fine (cost me some hours, but yay!)

Now I need to calculate a Total in the tbTotal Textbox found at the bottom of the table and i'm trying for over 8 hours now, but cannot seem to find a solution. So I hope someone will help.

I tried to get the thing going in Jsfiddle, but didnt find out how. So the project can be found at http://app.novam-it.nl/#/openkassa

at http://app.novam-it.nl/app.zip you can download the projectfiles if that would be any help

This is my repeatercode:

<tr ng-repeat="type in types">
            <td><input ng-change="calc()" type="text" class="form-control" ng-model="type.basic"></td>
            <td><input type="text" class="form-control" disabled ng-model="type.type" currency></td>
            <td><input type="text" ng-init="calc()" class="form-control total" disabled ng-model="tbTotal" currency></td>
        </tr>

And this is my controller at the moment

app.controller('openKassaController', function(currencyFactory, $scope) {
$scope.types = currencyFactory.types;
$scope.calc = function ($scope) {
    this.tbTotal = this.type.type * this.type.basic;
};

});

I hope someone can help me!

Regards,

Wouter

Upvotes: 1

Views: 1081

Answers (2)

Jerrad
Jerrad

Reputation: 5290

I've assigned a total function to each of your currency types that computes the total for that type/row. I've also made a $scope.total function that loops over each type and computes the total for all rows. The controller looks like this:

 app.controller('openKassaController', function(currencyFactory, $scope) {
    $scope.types = currencyFactory.types;
    angular.forEach($scope.types, function(type){ 
      //Add a total function to each row.
      type.total = function(){
        return type.type * type.basic;
      };
    });

    //Total for all rows.
    $scope.total = function(){
      var total = 0;
      angular.forEach($scope.types, function(type){
        total += type.total();
      });
      return total;
    }
});

I've also replaced your currency directive with the built-in currency filter.

Here's a plunker showing it all working.

Upvotes: 2

gkalpak
gkalpak

Reputation: 48211

If you want to calculate a total per row:

...
<td><input type="text" ng-init="tbTotal=calc(type)" ... ng-model="tbTotal" currency></td>

...
$scope.calc = function (type) {
    return type.type * type.basic;
};

Upvotes: 0

Related Questions