角:从json地图上画一张表
角:从json地图上画一张表
提问于 2016-03-05 20:51:26
我尝试创建一个类似于全倾斜支出结构的表。我决定创建下一张地图：
$scope.payoutStructure = {
'2-4': {
1: 100,
2: 0,
3: 0,
4: 0,
5: 0,
6: 0,
},
'6-7': {
1: 65,
2: 35,
3: 0,
4: 0,
5: 0,
6: 0,
}
}等等..。
但我想不出怎么渲染它。如果我没有弄错，那么首先我必须像这样呈现标题：
<thead>
<tr>
<th><strong>Position \ Entries</strong></th>
<th ng-repeat="key in payoutStructure.keys()">{{key}}</th> //I'm not sure about .keys(), because they are not render in order as I know
</tr>
</thead>但我搞不懂如何渲染。似乎我必须使用数组而不是地图，但我想通过键获得值，例如：
{{payoutStructure[entries]['1']}}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-03-05 21:55:59
1)标题--您应该呈现如下
<tr>
<th ng-repeat="(key,value) in payoutStructure">{{key}}</th>
</tr>2)至于tbody，它由行(而不是列)呈现，因此您的结构应该遵循此结构。
可能是这样的：
$scope.payoutStructure = ['2-4','6-7','8-9', '10-18', '18-45'];
$scope.payoutData = [
[100, 65, 50, 40, 38],
[0, 35,30,30,25]
]
<table class="table">
<tr>
<th ng-repeat="header in payoutStructure">{{header}}</th>
</tr>
<tr ng-repeat="row in payoutData">
<td ng-repeat="value in row track by $index" >{{value}} </td>
</tr>
</table>Stack Overflow用户
发布于 2016-03-05 22:06:58
以下将适用于您的数据结构：
<table class="table">
<thead><tr>
<th>Finishing Position</th>
<th ng-repeat="(key, value) in payoutStructure">{{key}}</th>
</tr></thead>
<tbody>
<tr ng-repeat="key in payoutStructure['2-4']">
<th scope="row">{{$index +1}}</th>
<td>{{payoutStructure['2-4'][$index+1]}}</td>
<td>{{payoutStructure['6-7'][$index+1]}}</td>
</tr>
</tbody>
</table>
但是，如果按以下方式更改数据结构，则更好：
(function(angular) {
'use strict';
angular.module('ngRepeat', [])
.controller('repeatController', function($scope) {
$scope.payouts = {
'2-4': [100],
'6-7': [65, 35],
'8-5': [50, 30, 20],
'10-18': [40, 30, 20, 10],
'18-45': [38, 25, 16, 10, 6, 5]
};
$scope.maxArray = [];
angular.forEach($scope.payouts, function(value, key) {
if (value.length > $scope.maxArray.length)
$scope.maxArray = value;
});
});
})(window.angular);这里是$scope.maxArray，我们用最大数据数组长度编写支出。现在可以用ng-repeat输出它了。
<table class="table">
<thead><tr>
<th>Finishing Position</th>
<th ng-repeat="(key, value) in payouts">
{{key}}
</th>
</tr></thead>
<tbody>
<tr ng-repeat="key in maxArray track by $index">
<th scope="row">{{$index + 1}}</th>
<td ng-repeat="payout in payouts">
{{payout[$parent.$index]}}
</td>
</tr>
</tbody>
</table>柱塞结果：http://plnkr.co/edit/n5BfCtqjUKJ7LxvtxIFp?p=preview
以及用于ngRepeat指令的官方API文档：https://docs.angularjs.org/api/ng/directive/ngRepeat
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35819772
复制相关文章
相似问题
腾讯云开发者
