表格中的ng-repeat值的总和在angularjs中

时间:2017-06-22 09:28:40

标签: javascript html angularjs

我是angularjs的新手,并尝试使用ng-repeat使用值(整数值)填充表,使用输入变量id = v1正确填充表中的值,但我无法将总和行到表格最后一栏的标签,请帮助/指导。

Html代码:

<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>

控制器代码:

'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");
      });

};

示例图片: 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

2 个答案:

答案 0 :(得分:0)

您可以访问DataLoads lentgh以获取在ng-repeat之外显示的行数。

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

EDITED

以这种方式尝试:

<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>

答案 1 :(得分:0)

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

这解决了我的问题。感谢@Jenny