Question

如何添加列的行数据并显示表格的总近端标题部分<th>。

示例代码https://plnkr.co/edit/2eA53vamQzlatHT6Q6BE?p=preview

我想添加Balance Amt列并在标题部分显示总计（在Balance Amt标题附近）。我尝试使用下面的代码，但它没有计算总数。

 <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4" style="width:10%;white-space : nowrap;text-align: center;">Balance Amt
       <div ng:repeat="data in myResults">
         {{myResults.$sum('balanceAmount')}}
         </div>                 
   </th>

我想用angularjs来做。有什么输入吗？

Answer 1

您可以使用javascript中的map和reduce数组方法，而不使用for循环或each，如下所示

我已添加到$scope中的新变量，以便在$scope.filteredArray中仅存储余额金额的过滤数组，并在$scope.total中显示总数。如果它们的数组很大，那么这个与手动循环数组相比，该方法更快。

javascript代码

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.myResults=[
    { name:'John',callerId:'1234',dataPlan:'new',amountPaid:100,balanceAmount:30,month:'jan'},
    { name:'Dex',callerId:'2345',dataPlan:'another',amountPaid:100,balanceAmount:30,month:'feb'},
    { name:'Joe',callerId:'3456',dataPlan:'',amountPaid:100,balanceAmount:30,month:'march'},
    { name:'Ann',callerId:'1234',dataPlan:'new',amountPaid:100,balanceAmount:30,month:'apr'},
    { name:'Sam',callerId:'2345',dataPlan:'another',amountPaid:100,balanceAmount:30,month:'may'},
    { name:'Sam S',callerId:'3456',dataPlan:'',amountPaid:100,balanceAmount:30,month:'june'},


    ];

     $scope.filteredArray = $scope.myResults.map(function(x){
      return x["balanceAmount"];
    });
      $scope.total = $scope.filteredArray.reduce(function(initial, currentValue) {
    return initial + currentValue;
  });


});

更改HTML以显示total值

 <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4" style="width:10%;white-space : nowrap;text-align: center;">Balance Amt:
       <span>
         {{total}}
       </span>
 </th>

以下是完整的工作代码段

＆＃13;

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $scope.myResults = [{
      name: 'John',
      callerId: '1234',
      dataPlan: 'new',
      amountPaid: 100,
      balanceAmount: 30,
      month: 'jan'
    },
    {
      name: 'Dex',
      callerId: '2345',
      dataPlan: 'another',
      amountPaid: 100,
      balanceAmount: 30,
      month: 'feb'
    },
    {
      name: 'Joe',
      callerId: '3456',
      dataPlan: '',
      amountPaid: 100,
      balanceAmount: 30,
      month: 'march'
    },
    {
      name: 'Ann',
      callerId: '1234',
      dataPlan: 'new',
      amountPaid: 100,
      balanceAmount: 30,
      month: 'apr'
    },
    {
      name: 'Sam',
      callerId: '2345',
      dataPlan: 'another',
      amountPaid: 100,
      balanceAmount: 30,
      month: 'may'
    },
    {
      name: 'Sam S',
      callerId: '3456',
      dataPlan: '',
      amountPaid: 100,
      balanceAmount: 30,
      month: 'june'
    },


  ];

  $scope.filteredArray = $scope.myResults.map(function(x) {
    return x["balanceAmount"];
  });
  $scope.total = $scope.filteredArray.reduce(function(initial, currentValue) {
    return initial + currentValue;
  });


});

＆＃13;

.well {
  background: none;
  height: 600px;
}

.table-scroll tbody {
  position: absolute;
  overflow-y: scroll;
  height: 500px;
}

.table-scroll tr {
  width: 100%;
  table-layout: fixed;
  display: inline-table;
}

.table-scroll thead>tr>th {
  border: none;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div class="modal-body">

  <div class="row">
    <div class="col-xs-10 col-xs-offset-2 well">
      <table ng-app="myApp" ng-controller="customersCtrl" class="table table-scroll table-striped">
        <thead>
          <tr style="background-color: #cdd0d6;">
            <th class="col-lg-4" style="width:15%;white-space: nowrap;text-align: center;">Name</th>
            <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4" style="width:10%;white-space: nowrap;text-align: center;">CallerID</th>
            <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4" style="width:15%;white-space: nowrap;text-align: center;">DataPlan</th>
            <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4" style="width:20%;white-space: nowrap;text-align: center;">Amount Paid</th>
           <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4" style="width:10%;white-space : nowrap;text-align: center;">Balance Amt:
            <span>
              {{total}}
            </span>
           </th>
            <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4" style="width:25%;white-space: nowrap;text-align: center;">Month</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="data in myResults">
            <td style="text-align: center;">{{data.name}}</td>
            <td style="text-align: center;">{{data.callerId}}</td>
            <td>{{data.dataPlan}}</td>
            <td style="text-align: center;">{{data.amountPaid}}</td>
            <td style="text-align: center;">{{data.balanceAmount}}</td>
            <td>{{data.month}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

＆＃13;

Answer 2

已使用范围变量金额，该金额由计算器中的for循环计算。

 var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.myResults=[
    { name:'John',callerId:'1234',dataPlan:'new',amountPaid:100,balanceAmount:30,month:'jan'},
    { name:'Dex',callerId:'2345',dataPlan:'another',amountPaid:100,balanceAmount:30,month:'feb'},
    { name:'Joe',callerId:'3456',dataPlan:'',amountPaid:100,balanceAmount:30,month:'march'},
       { name:'Ann',callerId:'1234',dataPlan:'new',amountPaid:100,balanceAmount:30,month:'apr'},
    { name:'Sam',callerId:'2345',dataPlan:'another',amountPaid:100,balanceAmount:30,month:'may'},
    { name:'Sam S',callerId:'3456',dataPlan:'',amountPaid:100,balanceAmount:30,month:'june'},

    
    ];
   sum = function(){
    $scope.amount = 0;
      for(var i=0; i< $scope.myResults.length; i++){
        $scope.amount+= $scope.myResults[i].amountPaid;
      }
    }
    sum();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 


<style>
 
  .well {
            background: none;
            height: 600px;
        }

        .table-scroll tbody {
            position: absolute;
            overflow-y: scroll;
            height: 500px; 
        }

        .table-scroll tr {
            width: 100%;
            table-layout: fixed;
            display: inline-table;
        }

        .table-scroll thead > tr > th {
            border: none;
        }
    </style>
    
    
    <div class="modal-body">
    
        <div class="row">
<div class="col-xs-10 col-xs-offset-2 well">
    <table ng-app="myApp" ng-controller="customersCtrl" class="table table-scroll table-striped">
       <thead>
                    <tr style="background-color: #cdd0d6;">
                        <th class="" style="width:10%;white-space: nowrap;text-align: center;">Name</th>
                        <th class="" style="width:10%;white-space: nowrap;text-align: center;">CallerID</th>
                        <th class="" style="width:10%;white-space: nowrap;text-align: center;">DataPlan</th>
                        <th class="" style="width:50%;white-space: nowrap;text-align: center;">Amount Paid SUM : {{amount}}</th>
                        <th class="" style="width:10%;white-space : nowrap;text-align: center;">Balance Amt
        
       <div ng:repeat="data in myResults">
        
         </div>                 
                        
                        </th>
                        <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4" style="width:25%;white-space: nowrap;text-align: center;">Month</th>
                    </tr>
                    </thead>
                      <tbody>
     <tr ng-repeat="data in myResults">
      <td style="text-align: center;">{{data.name}}</td>
      <td style="text-align: center;">{{data.callerId}}</td>
      <td >{{data.dataPlan}}</td>
       <td style="text-align: center;">{{data.amountPaid}}</td>
       <td style="text-align: center;">{{data.balanceAmount}}</td>
      <td>{{data.month}}</td>
    </tr>
    </tbody>
</table>
 </div>
  
 </div>

 </div>

添加所有行值并显示总计

2 个答案: