AngularJS Third Order Nested Table Structure -

AngularJS Third Order Nested Table Structure -

say have next info structure

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

how, angularjs, can render in table similar following:

|-------|---------|---| | key 1 | value 1 | | | | |---| | | | b | | | |---| | | | c | | |---------|---| | | value 2 | d | | | |---| | | | e | |-------|---------|---| | key 2 | value 3 | f | | |---------|---| | | value 4 | g | | | |---| | | | h | |-------|---------|---|

the keys done via rowspan.

if really, need rowspans way it, it's beyond tricky , impossible read/follow unless author (sorry that), works. need back upwards of couple $filters

like this:

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); }); } homecoming total; }; homecoming function(object, level){ homecoming nnestedelements(object, 0, level); } }) .filter('objectkeys', function(){ homecoming function(object){ homecoming object.keys(object); }; });

view:

<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

angularjs