说我有以下数据结构
{ '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。
rowspan
如果您确实确实需要使用rowspans进行处理,这是一种处理方法,除非您是作者(对不起),否则它很难完成并且几乎不可能阅读/关注,但是可以使用。您只需要夫妇$filter的支持
$filter
像这样:
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>