简体   繁体   中英

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

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

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

This solved my problem. Thanks to @Jenny

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM