根据 json 响应显示表格
Posted
技术标签:
【中文标题】根据 json 响应显示表格【英文标题】：Show table depending on json response 【发布时间】：2016-02-15 20:52:52 【问题描述】：我有一个 json 数据，其中包含销售、税收等参数数组。从一个页面单击特定参数时，登录页面应显示该特定参数的表格。
"Sales": [
"Date": "2015-08-01 23:35:15.652",
"Val": 78
,
"Date": "2015-08-01 22:35:15.652",
"Val": 82
,
"Date": "2015-08-01 21:35:15.652",
"Val": 80
,
"Date": "2015-08-01 21:15:15.652",
"Val": 100
,
"Date": "2015-07-27 12:57:15.652",
"Val": 94
],
"Tax": [
"Date": "2015-08-01 23:35:15.652",
"Min": 78,
"Max":150
,
"Date": "2015-08-01 22:35:15.652",
"Min": 50,
"Max":120
,
"Date": "2015-08-01 21:35:15.652",
"Min": 65,
"Max":150
,
"Date": "2015-08-01 21:25:15.652",
"Min": 70,
"Max":190
,
"createdOn": "2015-08-01 21:15:15.652",
"Min": 90,
"Max":200
]
我的控制器
angular.module('starter.controllers', [])
.controller('TableCtrl','$scope', '$http', function($scope, $http)
$http.get('js/data.json').success(function(response)
if(response.data.Sales!=null)
$scope.data =response.data.Sales;
if(response.data.Tax!=null)
$scope.data =response.data.Tax;
);
);
如何从数据中动态显示表格？由于 Sales 表将包含 2 列，而 Tax 表将包含 3 列。 销售表
<table ng-controller="TableCtrl">
<thead>
<th>
<td>Date</td>
<td>Value</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>item.Date</td>
<td>item.Val</td>
</tr>
</tbody>
</table>
税表
<table ng-controller="TableCtrl">
<thead>
<th>
<td>Date</td>
<td>Min</td>
<td>Max</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>item.Date</td>
<td>item.Min</td>
<td>item.Max</td>
</tr>
</tbody>
</table>
同一个Controller TableCtrl如何根据条件显示不同的表格？
【问题讨论】：
【参考方案1】：在您的控制器中，将数据分成 $scope.sales 和 $scope.tax：
if(response.data.Sales != null)
$scope.sales = response.data.Sales;
$scope.tax = null;
if(response.data.Tax != null)
$scope.tax = response.data.Tax;
$scope.sales = null;
然后，在 html 中使用 ng-if 指令：
<div ng-controller="TableCtrl">
<table ng-if = "sales">
<thead>
<th>
<td>Date</td>
<td>Value</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in sales">
<td>item.Date</td>
<td>item.Val</td>
</tr>
</tbody>
</table>
<table ng-if = "tax">
<thead>
<th>
<td>Date</td>
<td>Min</td>
<td>Max</td>
</th>
</thead>
<tbody>
<tr ng-repeat="item in tax">
<td>item.Date</td>
<td>item.Min</td>
<td>item.Max</td>
</tr>
</tbody>
</table>
</div>
【讨论】：
我认为您的 ng-if 语句在逻辑上是不正确的。【参考方案2】：如果您有一组固定类型，例如 Sales、Tax 等，则提供像 @Majid 这样的硬编码版本就可以了。但是，您可以制作一个更加动态的版本，其中表格会根据提供的 json 数组进行调整。
考虑以下数据：
var data=
"Sales": [
"Date": "2015-08-01 23:35:15.652",
"Val": 78
,
"Date": "2015-08-01 22:35:15.652",
"Val": 82
,
"Date": "2015-08-01 21:35:15.652",
"Val": 80
,
"Date": "2015-08-01 21:15:15.652",
"Val": 100
,
"Date": "2015-07-27 12:57:15.652",
"Val": 94
],
"Tax": [
"Date": "2015-08-01 23:35:15.652",
"Min": 78,
"Max":150
,
"Date": "2015-08-01 22:35:15.652",
"Min": 50,
"Max":120
,
"Date": "2015-08-01 21:35:15.652",
"Min": 65,
"Max":150
,
"Date": "2015-08-01 21:25:15.652",
"Min": 70,
"Max":190
,
],
"Inventory": [
"Type": "Car",
"Amount": 100,
,
"Type": "Bike",
"Amount": 32,
,
"Type": "Shoes",
"Amount": 677,
,
]
;
控制器：
function mainCtrl()
this.data=data;
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
下面的 html 代码现在将使用每个数组中的第一个对象打印出属性名称，然后将数组中的每个对象相应地打印到表中。
<body ng-controller="mainCtrl as main">
<div ng-repeat="(name, table) in main.data">
<h3>name</h3>
<table>
<thead>
<tr>
<!-- Iterate and print field names -->
<th ng-repeat="(key, value) in table[0]">key</th>
</tr>
</thead>
<tbody>
<!-- Print rows -->
<tr ng-repeat="row in table">
<td ng-repeat="value in row">value</td>
</tr>
</tbody>
</table>
</div>
</body>
此处的示例：http://jsbin.com/pafanuwoka/edit?html,js,output
有了这个解决方案，您需要确保每个数组中的所有对象都是相似的，因为我们从每个数组中的第一个对象打印字段名称。但是您也可以在数据字段中添加更多的 json 数组。
如果这在您的应用程序中很常见，您可能应该考虑将其添加为指令。此处示例：http://jsbin.com/gayirinifo/edit?html,js,output
【讨论】：
以上是关于根据 json 响应显示表格的主要内容，如果未能解决你的问题，请参考以下文章