Sum of ng-repeat values in table row-wise in angularjs

Question

i am new to angularjs, and trying to populate the table with values (integer values) using ng-repeat, the values are correctly populating in the table using input variable id=v1, but i am unable to put sum of the row to the label which is in the last column of table, please help/ guide.

Html Code:

<tbody>
<tr ng-controller="Dataload" ng-model="orderProp"  ng-repeat="(key, value) in Dataloads | groupBy:'project'">
<td>
<label id="projectname" name="projectname" readonly style="width:300px">{{key}}</label>
</td>
<td ng-repeat="Dataload in value | orderBy:'date':false ">
<div>
<select ID="DropDownList1" Width="8%" Height="28px">                                                                        
<option value="pending">&#9994;</option>
<option value="accept">&#9989;</option>
<option value="reject">&#10060;</option>
</select>
<input type="text" id="v1" name="" class="form-control" readonly="readonly" data-ng-model="Dataload.qty" required />
</div>
</td>
<td>
<label style="width:90px" name="total" id="total" >**want to show sum of row in this label**</label>
</td>

</tr>
</tbody>

Controller Code:

'use strict';
var app = angular.module("GMAO3App");
app.controller('Dataload', Dataload);
Dataload.$inject = ['$scope', '$rootScope', '$http', 'ngAuthSettings'];
function Dataload($scope, $rootScope, $http, ngAuthSettings) {

    var serviceBase = ngAuthSettings.apiServiceBaseUri;
    $http.get(ngAuthSettings.apiServiceBaseUri + 'web/partes/Dataload?worker=233&society=1&branch=0&start=2017-05-29&end=2017-06-04').
      success(function (data, status, headers, config) {
          $scope.Dataloads = data;
          var Data_project = [];
          var Data1_qty = [];
          var Data2_date = [];
          for (var i = 0; i <= $scope.Dataloads.length; i++) {
              Data_project[i] = $scope.Dataloads[i].project;
              Data1_qty[i] = $scope.Dataloads[i].qty;
              Data2_date[i] = $scope.Dataloads[i].date;
          }

      }).
      error(function (data, status, headers, config) {
          alert("error");
      });

};

Sample Image: Image contains the UI and sample data for example (1,6,1 2,3), i want to add these values and add their sum to last column of row

Can you not get the length of the array to display in the variable? — Shayuh
– Shayuh, Commented Jun 22, 2017 at 9:33
@Sai i have edited the ques and attached my GUI with sample data. — Machine Guy
– Machine Guy, Commented Jun 22, 2017 at 10:11
@Y.Hewa i am putting values from controller directly using ng-repeat — Machine Guy
– Machine Guy, Commented Jun 22, 2017 at 10:11
so basically you want the sum of the DataLoad.qty for each row? — Shayuh
– Shayuh, Commented Jun 22, 2017 at 10:14

Machine Guy · Accepted Answer · 2017-06-22 11:22:50Z

0

<label style="width:90px" name="total" id="total" >{{value | map:'qty' | sum}}
</label>

This solved my problem. Thanks to @Jenny

answered Jun 22, 2017 at 11:22

Machine Guy

11 silver badge7 bronze badges

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

Comments

Shayuh · Accepted Answer · 2017-06-22 11:25:53Z

0

You can access the DataLoads lentgh to get the number of rows that display at the end, outside the ng-repeat.

<td>
     <label style="width:90px" name="total" id="total">{{DataLoads.length}}</label>
</td>

EDITED

Try it this way :

<table>
    <tbody>
         <tr ng-controller="Dataload" ng-model="orderProp"  ng-repeat="(key, value) in Dataloads | groupBy:'project'">
             <td>
                 <label id="projectname" name="projectname" readonly style="width:300px">{{key}}</label>
             </td>
             <td ng-repeat="Dataload in value | orderBy:'date':false" ng-init="items.total = {}">
             <div>
                <select ID="DropDownList1" Width="8%" Height="28px">                                                                        
                   <option value="pending">&#9994;</option>
                   <option value="accept">&#9989;</option>
                   <option value="reject">&#10060;</option>
                </select>
              <input type="text" id="v1" name="" class="form-control" readonly="readonly" data-ng-model="Dataload.qty" ng-init="items.total.qty = items.total.qty + Dataload.qty" required />
             </div>
             </td>
             <td>
                 <label style="width:90px" name="total" id="total" >{{items.total.qty}}</label>
             </td>

         </tr>
    </tbody>
    <table>

edited Jun 22, 2017 at 11:25

answered Jun 22, 2017 at 9:40

Shayuh

3911 gold badge3 silver badges11 bronze badges

4 Comments

Machine Guy Over a year ago

I want to add the whole row and put their sum in last column while using ng-repeat, i have updated my question and attached sample data and GUI, please re-check.

Machine Guy Over a year ago

I have updated it but i am getting the sum of all of the rows in every last column; in case of data set i have given above in my post, it is giving 41 at the end of both rows, instead of giving sum of single row it's calculating sum of all rows puts that value in the end of every row as total.

Shayuh Over a year ago

@MachineGuy try putting the 'ng-init="items.total = {}" ' in the first <tr> instead of the <table>

Machine Guy Over a year ago

I have got solution, by @Jenny help in upper comments, it's very easy solution, still thanks for your help.

Collectives™ on Stack Overflow

Sum of ng-repeat values in table row-wise in angularjs

2 Answers 2

Comments

EDITED

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

EDITED

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related