如何使用angularjs动态显示具有收入明细和扣除明细的对象数组？答案

【问题标题】：How to display array of object which is having the earning details and deduction details using angularjs dynamically?如何使用angularjs动态显示具有收入明细和扣除明细的对象数组？
【发布时间】：2017-12-25 17:42:39
【问题描述】：

我在前端使用 angular.js， I am having some list of values in DB.

控制器代码：

我在控制台中得到以下输出。控制台.log($scope.items);

$scope.items = [
  {
    salary_head_name : 'BASIC',
    salary_head_value : 15000,
    salary_head_type : 'E'

  }, {    
    salary_head_name : 'HRA',
    salary_head_value : 7500,
    salary_head_type : 'E'    
  },{    
    salary_head_name : 'Conveyance',
    salary_head_value : 1600,
    salary_head_type : 'E'    
  },{    
    salary_head_name : 'Med. Allow',
    salary_head_value : 1800,
    salary_head_type : 'E'    
  },{    
    salary_head_name : 'PF',
    salary_head_value : 1800,
    salary_head_type : 'D'    
  }
];

实际上，它会打印所有记录。

UI 中的预期输出：enter image description here

【问题讨论】：

请展示你到目前为止所做的尝试。
嗨，我得到了一个数组对象，它在单个数组对象中同时具有收入和扣除头，但我想显示收入头和前两列的金额，扣除额和第三列的金额和第 4 栏...请您帮我解决这个问题...？
您是否尝试过任何您想要的显示表格代码？
是的，我使用简单的 ng-repeat 在表中显示列表..

标签： html angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
    var items = [ 
      { salary_head_name : 'BASIC', salary_head_value : 15000, salary_head_type : 'E'},
      { salary_head_name : 'HRA', salary_head_value : 7500, salary_head_type : 'E'},
      { salary_head_name : 'Conveyance', salary_head_value : 1600, salary_head_type : 'E'},
      { salary_head_name : 'Med. Allow', salary_head_value : 1800, salary_head_type : 'E'},
      { salary_head_name : 'PF', salary_head_value : 1800, salary_head_type : 'D'} 
    ];
    
    var getPortion = function(label){      
      var sum = 0;
      var out = items.filter(function(x){         
        return x.salary_head_type == label && (sum += x.salary_head_value);
      });
      return { out, sum }
    };
    
    var es = getPortion('E');
    var ds = getPortion('D');
    for(var item of ds.out)
      es.out[ds.out.indexOf(item)].ds = item;      
      
    $scope.items = es.out;
    $scope.totals = [es.sum, ds.sum];    
}]);

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-controller="ctrl" ng-app='app'>
    <table>
      <thead>
        <tr>
          <th ng-repeat="head in ['Earnings', 'Amount', 'Deductions', 'Amount'] track by $index">{{head}}</th>          
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='item in items'>
          <td>{{item.salary_head_name}}</td>
          <td>{{item.salary_head_value | number : 2}}</td>
          <td>{{item.ds ? item.ds.salary_head_name : ''}}</td>
          <td>{{item.ds ? (item.ds.salary_head_value | number : 2) : ''}}</td>
        </tr>
        <tr>
          <td ng-repeat-start='item in totals' style='font-weight: bold'>Total:</td>
          <td ng-repeat-end>{{item | number : 2}}</td>          
        </tr>
      </tbody>
    </table>
</div>

【讨论】：

非常感谢...现在我会尝试这个并让您知道.. :)
非常感谢你，伙计......你拯救了我的一天......它像我预期的那样工作...... :)Slava Utesinov