具有子标题的动态表标题 [英] Dynamic table header with subheaders
问题描述
如何创建(带有角度的)动态表标头,其中标头单元格应具有不等于标头单元格的子标头单元格?
How to create (with angular) dynamical table header where header cells should have some subheader cells not equal to header cells?
我的桌子是:
var table = [{
header: "a",
subheaders: "a1", "a2"
}, {
header: "b",
subheaders: "b1", "b2", "b3"
}]
我尝试创建这样的表头(表数据将具有单独的控制器):
I try to create such table header (table data will have separate controller):
|a |b |
|a1|a2|b1|b2|b3|
我使用ng-repeat,头文件没问题(当我执行< tr ng-repeat =表中的标题"时)< th> {{head.header}}</th>;</tr>
),但是当我尝试对子标题执行相同操作时,ng-repeat重复了整个子标题数组,并且我丢失了table或smth的某些伪元素...
I use ng-repeat and everything is ok with headers (when i do <tr ng-repeat="head in table"><th>{{head.header}}</th></tr>
), but when I try to do the same with subheaders, ng-repeat repeats whole array of subheaders and I am missing some pseudo element of table or smth...
我得到
|a |b |
|a1a2|b1b2b3|
这是我的代码: http://plnkr.co/edit/pSwjxi2vMN61tevArW4F?p=预览
推荐答案
请参见以下内容:
(function() {
var table = {
thead: [{
header: "A",
subheaders: [
"A1",
"A2"
]
}, {
header: "B",
subheaders: [
"B1",
"B2",
"B3"
]
}, {
header: "C",
subheaders: [
"C1",
"C2",
"C3"
]
}]
};
var app = angular.module("app", []);
app.controller("Controller", function() {
var vm = this;
vm.table = table;
vm.subArray = [];
vm.subs = function(table) {
angular.forEach(vm.table.thead, function(header) {
angular.forEach(header.subheaders, function(subheader) {
vm.subArray.push(subheader)
})
})
};
vm.subs();
});
})()
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="app">
<div ng-controller="Controller as ctrl">
<h1>Some table</h1>
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="head in ctrl.table.thead" colspan="{{head.subheaders.length}}">{{head.header}}</th>
</tr>
<tr>
<th ng-repeat="sub in ctrl.subArray">{{sub}}</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8]">{{i}}</td>
</tr>
</tbody>
</table>
</div>
</div>
这篇关于具有子标题的动态表标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!