AngularJS三阶嵌套表结构

Question

说我有以下数据结构

{
    '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完成。

Answer 1

使用rowspan呈现此数据结构真的很酷。但是，即使使用ng-repeat-start/end指令，我也不确定它是否容易。看起来更简单，使用表和一些嵌套的表/ div。在这种情况下，标记保持相对简单：

<table>
    <tr ng-repeat="(key, value) in data">
        <td>{{key}}</td>
        <td class="inner">
            <table>
                <tr ng-repeat="(skey, svalue) in value">
                    <td>{{skey}}</td>
                    <td class="inner">
                        <div ng-repeat="val in svalue">{{val}}</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

演示：http://plnkr.co/edit/4LCr4PUcZn95WUKxlUMk?p=preview

Answer 2

如果你真的，真的需要用rowspan这样做，这是一种方法，除非你是作者，否则它超越了狡猾，几乎不可能阅读/遵循（抱歉），但它的工作原理。您只需要一对$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>

Example

Answer 3

您必须更改所拥有数据的数据结构。在这里，我解析了数据，并在td ng-repeat期间tr angular.module('app', []) .controller('testCtrl', ['$scope', function($scope){ $scope.item = { "main1": { "proj1": ["comp1", "comp2"], "proj2": ["comp3", "comp4", "comp5"] }, "main2": { "proj3": ["comp1", "comp2"], "proj4": ["comp3", "comp4"], "proj5": ["comp1"] } }; var parsedDs = []; var currRow = []; for(var mainKey in $scope.item){ var main = $scope.item[mainKey]; var mainDs = { val: mainKey, span: 0 } currRow.push(mainDs); for(var projKey in main){ var proj = main[projKey]; var projDs = { val: projKey, span: 0 } currRow.push(projDs); for(var compKey in proj){ mainDs.span++; projDs.span++; var comp = proj[compKey]; currRow.push({ val: comp, span: 1 }); parsedDs.push(currRow); currRow = []; } } } $scope.suitableDs = parsedDs; }])中获取了我需要多少行数的信息

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app='app' ng-controller='testCtrl'>
  <table border="1">
    <tr>
      <th width="100">Main</th>
      <th width="100">Project</th>
      <th width="100">Company</th>
    </tr>
    <tr ng-repeat="row in suitableDs">
      <td ng-repeat="col in row" rowspan="{{col.span}}">
        {{ col.val }}
      </td>
    </tr>
  </table>
</div>

＆＃13;

from __future__ import unicode_literals

＆＃13;

＆＃13;

＆＃13;