AngularJS 三阶嵌套表结构 [英] AngularJS Third Order Nested Table Structure

查看:24
本文介绍了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 |
|-------|---------|---|

键是通过rowspan完成的.

推荐答案

如果你真的,真的需要用 rowspan 来做这件事,这是一种方法,它非常棘手,几乎不可能阅读/关注,除非您是作者(对此感到抱歉),但它有效.你只需要几个 $filters

If you really, really need to do it with rowspans 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 $filters

像这样:

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆