如何使用angularjs动态显示表中的对象数组？
Posted
技术标签:
【中文标题】如何使用angularjs动态显示表中的对象数组？【英文标题】：How display array of objects in table using angularjs dynamically? 【发布时间】：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有关 【参考方案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>【讨论】：
以上是关于如何使用angularjs动态显示表中的对象数组？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用AngularJS从ng-repeat中的数组中删除对象？