使用ng-repeat和嵌套循环添加行

一尘不染

使用ng-repeat和嵌套循环添加行

angularjs

我正在寻找一种向表添加行的方法。我的数据结构如下所示：

  rows = [
    { name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
    { name : 'row2' }
  ];

我想创建一个看起来像这样的表：

  table
     row1
     row1.1
     row1.2
     row2

angular js ng-repeat有可能吗？如果没有，那将是一种“成角度的”方式呢？

编辑：展平数组将是一个不好的解决方案，因为如果我可以遍历子元素，我可以在单元格，其他css类等中使用不同的html标签。

阅读 231

2020-07-04

共1个答案

一尘不染

您将无法使用ng-repeat做到这一点。但是，您可以使用指令来实现。

<my-table rows='rows'></my-table>

小提琴。

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)
        }
    }
});

2020-07-04