AngularJS三阶嵌套表结构 [英] AngularJS Third Order Nested Table Structure
本文介绍了AngularJS三阶嵌套表结构的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
说我有以下的数据结构
{
'Key 1': {
'Value 1': ['a', 'b', 'c'],
'Value 2': ['d', 'e']
},
'Key 2': {
'Value 3': ['f'],
'Value 4': ['g', 'h']
}
}
如何,与AngularJS,我可以使其在类似于下面的表格:
How, with AngularJS, can I render it in a table similar to the following:
|-------|---------|---|
| Key 1 | Value 1 | a |
| | |---|
| | | b |
| | |---|
| | | c |
| |---------|---|
| | Value 2 | d |
| | |---|
| | | e |
|-------|---------|---|
| Key 2 | Value 3 | f |
| |---------|---|
| | Value 4 | g |
| | |---|
| | | h |
|-------|---------|---|
按键内部使用行跨度
完成的。
推荐答案
如果你真的需要用行跨度
做IT方面,这是一个办法做到这一点,这超出棘手,几乎是不可能的读/遵守,除非你是作者(对此感到遗憾),但它的工作原理。你只需要一对夫妇 $过滤器的支持
取值
If you really, really need to do it with rowspan
s this is a way to do it, it's beyond tricky and almost impossible to read/follow unless you are the author (sorry about that), but it works. You just need the support of a couple $filter
s
这样的:
angular.module('testApp', [])
.controller('testController', function ($scope) {
$scope.testData = {
'Key 1': {
'Value 1': ['a', 'b', 'c'],
'Value 2': ['d', 'e']
},
'Key 2': {
'Value 3': ['f'],
'Value 4': ['g', 'h']
}
};
})
.filter('nNestedElements', function(){
var nNestedElements = function(collection, currentLevel, stopLevel){
var total = 0;
if(stopLevel==currentLevel){
if(Object.prototype.toString.call(collection) === '[object Array]')
total += collection.length;
else
total += Object.keys(collection);
}else{
angular.forEach(collection, function(value){
total += nNestedElements(value, currentLevel+1, stopLevel);
});
}
return total;
};
return function(object, level){
return nNestedElements(object, 0, level);
}
})
.filter('objectKeys', function(){
return function(object){
return Object.keys(object);
};
});
查看:
<table ng-app="testApp" ng-controller="testController">
<tr ng-repeat-start="(key, val) in testData">
<td rowspan="{{val|nNestedElements:1}}">{{key}}</td>
<td rowspan="{{val[(val|objectKeys)[0]].length}}">{{(val|objectKeys)[0]}}</td>
<td>{{ val[(val|objectKeys)[0]][0]}}</td>
</tr>
<tr ng-repeat="val2 in val[(val|objectKeys)[0]].slice(1)">
<td>{{val2}}</td>
</tr>
<tr ng-repeat-start="subkey in (val|objectKeys).slice(1)">
<td rowspan="{{val[subkey].length}}">{{subkey}}</td>
<td>{{ val[subkey][0] }}</td>
</tr>
<tr ng-repeat="value3 in val[subkey].slice(1)" ng-repeat-end>
<td>{{ value3 }}</td>
</tr>
<tr ng-repeat-end ng-if="false" ><td></td></tr>
</table>
这篇关于AngularJS三阶嵌套表结构的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文