Here's a fantastic solution provided for this specific question, demonstrating how to utilize a directive to showcase nested objects as <tr>'s. However, I'm aiming to take it a step further by passing a nested object into my attribute as well.
In the case below, I've introduced obj to my scope and connected the rows directly to obj. Yet, upon doing so, it stops functioning and none of the rows are rendered. What could be causing this issue?
I suspect that there might be an issue with scope[attrs.rows] but I'm not entirely sure.
HTML:
<div ng-controller="MyCtrl">
<my-table rows='obj.rows'></my-table>
</div>
Javascript:
var myApp = angular.module('myApp', []);
myApp.directive('myTable', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var html = '<table>';
angular.forEach(scope[attrs.rows], function (row, index) {
html += '<tr><td>' + row.name + '</td></tr>';
if ('subrows' in row) {
angular.forEach(row.subrows, function (subrow, index) {
html += '<tr><td>' + subrow.name + '</td></tr>';
})
}
})
html += '</table>';
element.replaceWith(html)
}
}
});
function MyCtrl($scope) {
$scope.obj = {
rows = [];
}
$scope.obj.rows = [
{ name: 'row1', subrows: [{ name: 'row1.1' }, { name: 'row1.2' }] },
{ name: 'row2' }
];
}
Link to fiddle: http://jsfiddle.net/mattheye/uqNLH/1/
I am striving to achieve functionality similar to this fiddle: http://jsfiddle.net/mrajcok/vGUsu/