CODEWITHSUNDEEP
javascriptangularjs
kennechu
kennechu

Reputation: 1422

Sum values from different ng-repeat Angular js

I want to sum three values from different ng-repeat in my view, this is what I have.

<tr ng-repeat="a in data1">
  <td>a.num1</td>
</tr>
<tr ng-repeat="b in data2">
  <td>b.num2</td>
</tr>
<tr ng-repeat="c in data3">
  <td>c.num3</td>
</tr>
<tr>
  <td>(Here I want to print the sum of the three values)</td>
</tr>

I have this in my controller.

    $scope.data1 = [
        {
          "num1": 1,
        }
    ]
    $scope.data2 = [
         {
           "num2": 2,
         }
    ]

    $scope.data3 = [
        {
           "num3": 3,
        }
   ]

The binding is ok, I print the values coming from each ng-repeat but I need to sum does values and print the result in the last

Some help with this will be great!

Upvotes: 0

Views: 111

Answers (4)

echopeak
echopeak

Reputation: 261

This question may have been already answered but this may help. its more of a design pattern than an answer. it does involve rewriting some of your code.

By organizing data around one object you have more flexibility when it comes to dynamically creating / mutating data.

angular.module('app',[])
.controller('bazContoller',function($scope){

let things = { //controller name or namespace
      enums:{ //enumerable's used by the controller
        data1:[ 
          { "num": 1 }
        ],
        data2:[ 
          { "num": 2 }
        ],
        data3:[ 
          { "num": 67 }
        ]
      },
  
      sum(){
      return Object.keys(this.enums).map(item => this.enums[item])
        .reduce((start ,item)=>start += item[0].num,0);
      }
  }

  Object.assign(this ,things) ; //controller as 
  //$scope['bazContoller'] = things; //$scope
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller='bazContoller as baz'>
    <table>
        <tr ng-repeat="a in baz.enums.data1">
      <td>{{a.num}}</td>
    </tr>
    <tr ng-repeat="b in baz.enums.data2">
      <td>{{b.num}}</td>
    </tr>
    <tr ng-repeat="c in baz.enums.data3">
      <td>{{c.num}}</td>
    </tr>
    <tr>
      <td>SUM: {{baz.sum()}}</td>
    </tr>
    </table>
  
  </div>
</div>

Upvotes: 1

Durgpal Singh
Durgpal Singh

Reputation: 11953

you also can use ng-repeat-start and ng-repeat-end to access value outside ng-repeat

like this

<body ng-app="myApp" ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>

<table>
  <tr ng-repeat-start="a in data1">
      <td>{{a.num1}}</td>
  </tr>
  <tr ng-repeat-start="b in data2">
      <td>{{b.num2}}</td>
  </tr>
  <tr ng-repeat-end>
    <td>{{a.num1 + b.num2}} </td>
  </tr>
  <tr ng-repeat-end></tr>
</table>

for more information ng-repeat-start

Upvotes: 1

Bilas Sarker
Bilas Sarker

Reputation: 459

Try this:

//in your controller side added this method

$scope.getTotal = function(){
    var total = 0;
    angular.forEach($scope.data1, function(data1) { 
        total += data1.num1;
    }
    angular.forEach($scope.data2, function(data2) { 
        total += data2.num2;
    }
    angular.forEach($scope.data3, function(data3) { 
        total += data3.num3;
    }
    return total;
}


<td>{{ getTotal() }}</td>//Here is the total value

Upvotes: 1

Shwetha
Shwetha

Reputation: 903

In your controller do this :

$scope.sum = $scope.data1[0].num1 + $scope.data2[0].num2 + $scope.data3[0].num3;

And assign the sum in td as below:

<tr><td>{{sum}}</td></tr>

Upvotes: 3

Related Questions