Adding rows with ng-repeat and nested loop

Question

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          


        

Answer 1

You won't be able to do this with ng-repeat. You can do it with a directive, however.

Fiddle.

myApp.directive('myTable', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var html = '';
            angular.forEach(scope[attrs.rows], function (row, index) {
                html += '';
                if ('subrows' in row) {
                    angular.forEach(row.subrows, function (subrow, index) {
                        html += '';
                    });
                }
            });
            html += '
' + row.name + '
' + subrow.name + '
';
            element.replaceWith(html)
        }
    }
});