AngularJS三阶嵌套表结构

发布时间：2020-12-17 07:51:28 所属栏目：安全来源：网络整理

导读：说我有以下数据结构 { 'Key 1': { 'Value 1': ['a','b','c'],'Value 2': ['d','e'] },'Key 2': { 'Value 3': ['f'],'Value 4': ['g','h'] }} 如何使用AngularJS,我可以在类似于以下的表中呈现它： |-------|---------|---|| Key 1 | Value 1 | a || | |---||

说我有以下数据结构

{
    'Key 1': {
        'Value 1': ['a','b','c'],'Value 2': ['d','e']
    },'Key 2': {
        'Value 3': ['f'],'Value 4': ['g','h']
    }
}

如何使用AngularJS,我可以在类似于以下的表中呈现它：

|-------|---------|---|
| Key 1 | Value 1 | a |
|       |         |---|
|       |         | b |
|       |         |---|
|       |         | c |
|       |---------|---|
|       | Value 2 | d |
|       |         |---|
|       |         | e |
|-------|---------|---|
| Key 2 | Value 3 | f |
|       |---------|---|
|       | Value 4 | g |
|       |         |---|
|       |         | h |
|-------|---------|---|

密钥通过rowspan完成.

如果你真的,真的需要用rowpans这样做,这是一种方法,它是超级棘手的,几乎不可能阅读/遵循,除非你是作者(抱歉),但它的工作原理.你只需要几个$过滤器的支持

喜欢这个：

angular.module('testApp',[])
.controller('testController',function ($scope) {
    $scope.testData = {
        'Key 1': {
            'Value 1': ['a','e']
        },'Key 2': {
            'Value 3': ['f'],'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,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>

Example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!