如何使用angularjs动态显示表中的对象数组？答案

【问题标题】：How display array of objects in table using angularjs dynamically?如何使用angularjs动态显示表中的对象数组？
【发布时间】：2016-06-25 11:47:35
【问题描述】：

我将 angular.js 用于我的字体端，node.js 用于服务器端，PostgreSQL 用于数据库。

现在，我在 DB 中有一些值列表。

数据库：

控制器代码：

我在 console 中得到以下输出。

console.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'    
  }
];

注意：为了可读性我只打印了上面array中的几条记录（手动编辑），实际上它打印了所有记录。

UI 中的预期输出：

我还想在上表的 Total 字段中打印 Earnings 和 Deductions 的总和。

【问题讨论】：

看看ng-repeat 指令，用angularjs制作你的桌子。你应该发布一些你试图让它工作的代码，即使它不起作用。
这里不需要node.js标签，你的问题只和angular.js有关

标签： html angularjs html-table

【解决方案1】：

使用ng-repeat，基本思路请看以下代码：

(function(angular) {
  'use strict';
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope) {
  $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'

            }];
});
})(window.angular);

table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ngRepeat-production</title>
  <link href="animations.css" rel="stylesheet" type="text/css">
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="ngRepeat">
  <div ng-controller="repeatController">
  <table>
    <tr>
        <th>Earnings</th>
        <th>Amount</th>
        <th>Type</th>
    </tr>
    <tr ng-repeat="item in items">
        <td>{{item.salary_head_name}}</td>
        <td>{{item.salary_head_value}}</td>
        <td>{{item.salary_head_type}}</td>
    </tr>
</table>
        
</div>
</body>
</html>

【讨论】：