Adding rows with ng-repeat and nested loop
angularjs, javascript
Solution
You won't be able to do this with ng-repeat. You can do it with a directive, however.
<my-table rows='rows'></my-table>
Fiddle.
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)
}
}
});
Problem
I'm looking for a way to add rows to a table. My data structure looks like that: ``` rows = [ { name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] }, { name : 'row2' } ]; ``` I want to create a table which looks like that: ``` table row1 row1.1 row1.2 row2 ``` Is that possible with angular js ng-repeat? If not, what would be a "angular" way of doing that? Edit: Flatten the array would be a bad solution because if i can iterate over the sub elements i could use different html tags inside the cells, other css classes, etc.