SO - 18483324
by michiganfootball20
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<table >
<tbody create-table row-data="rows">
</tbody>
</table>
JavaScript
var app = angular.module('my-app', [], function () {
})
app.controller('AppController', function ($scope) {
$scope.message = "Welcome";
$scope.rows = [{
title: 'One',
child: [{
title: 'One - child'
}, {
title: 'Two - child',
child: [{title: 'Nested child'}]
}]
}, {
title: 'Two'
}, {
title: 'Three',
child: [{title: 'Three - child'}]
}];
});
app.directive('createTable', function ($compile) {
return {
scope: {
rowData: '='
},
link: function (scope, element, attrs) {
scope.groupBuilder = function(groupData)
{
for(var i in groupData){
cat = groupData[i];
var row = scope.rowBuilder(cat);
element.append(row);
if(cat.child){
scope.groupBuilder(cat.child);
}
}
}
scope.rowBuilder = function(rowData){
var rowScope = scope.$new();
rowScope.data = rowData;
var row = angular.element('<tr><td>{{data.title}}</td></tr>');
$compile(row)(rowScope);
return row;
}
scope.groupBuilder(scope.rowData);
/*if (element.next().length) {
element.next().insertBefore(element);
}
element.append('<td>{{rowData.title}}</td>');
$compile(element.contents())(scope.$new());
if(scope.rowData.child){
var contentTr = angular.element('<tr ng-repeat="subrow in rowData"><td><pre>rowData</pre></td></tr>');
console.log(element);
$compile(contentTr)(scope);
contentTr.insertAfter(element);
}*/
/*if...