Question

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

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

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

  table
     row1
     row1.1
     row1.2
     row2

角度js ng-repeat可能吗？如果没有，那么这种“有角度”的方式是什么？

编辑：压扁数组将是一个糟糕的解决方案，因为如果我可以迭代子元素，我可以在单元格内使用不同的html标签，其他css类等。

Answer 1

一年多以后但找到了一个解决方法，至少有两个级别（父亲 - >儿子）。
只需重复tbody：

<table>
  <tbody ng-repeat="row in rows">
    <tr>
      <th>{{row.name}}</th>
    </tr>
    <tr ng-repeat="sub in row.subrows">
      <td>{{sub.name}}</td>
    </tr>
  </tbody>
</table>

据我所知，所有浏览器都支持表中的多个tbody元素。

Answer 2

三年多以后，我一直面临同样的问题，在写下指令之前我试过这个问题，而且对我来说效果很好：

<table>
    <tbody>
        <tr ng-repeat-start="row in rows">
            <td>
                {{ row.name }}
            </td>
        </tr>
        <tr ng-repeat-end ng-repeat="subrow in row.subrows">
            <td>
                {{ subrow.name }}
            </td>
        </tr>
    </tbody>
</table>

Answer 3

您将无法使用ng-repeat执行此操作。但是，你可以使用指令来完成它。

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

Answer 4

我有点惊讶，有很多人提倡自定义指令并创建由$ watch更新的代理变量。

这样的问题是制作AngularJS过滤器的原因！

来自文档：

A filter formats the value of an expression for display to the user.

我们不打算操纵数据，只是将其格式化以便以不同的方式显示。因此，让我们制作一个过滤器，它接收我们的行数组，展平它，并返回展平的行。

.filter('flattenRows', function(){
return function(rows) {
    var flatten = [];
    angular.forEach(rows, function(row){
      subrows = row.subrows;
      flatten.push(row);
      if(subrows){
        angular.forEach(subrows, function(subrow){
          flatten.push( angular.extend(subrow, {subrow: true}) );
        });
      }
    });
    return flatten;
}
})

现在我们只需要将过滤器添加到ngRepeat：

<table class="table table-striped table-hover table-bordered">
  <thead>
    <tr>
      <th>Rows with filter</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows | flattenRows">
          <td>{{row.name}}</td>
      </tr>
  </tbody>
</table>

如果需要，您现在可以自由地将您的表格与其他过滤器结合使用，例如搜索。

虽然多tbody方法很方便且有效，但它会弄乱依赖于子行的顺序或索引的任何css，例如＆＃34;条纹＆＃34;桌子也假设你没有以一种你不想重复的方式设计自己的风格。

这是一个插件：http://embed.plnkr.co/otjeQv7z0rifPusneJ0F/preview

编辑：我添加了一个子行值，并在表格中使用它来显示哪些行是子行，因为您表示担心能够这样做。

Answer 5

是的，有可能：

控制器：

app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.rows = [
          { name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
          { name : 'row2' }
        ];

      }
    ]
  );

HTML：

<table>
  <tr ng-repeat="row in rows">
    <td>
      {{row.name}}
      <table ng-show="row.subrows">
        <tr ng-repeat="subrow in row.subrows">
          <td>{{subrow.name}}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Plunker

如果您不想要子表，请展平行（同时注释子行，以便能够区分）：

控制器：

function($scope) {
  $scope.rows = [
    { name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
    { name : 'row2' }
  ];

  $scope.flatten = [];
  var subrows;
  $scope.$watch('rows', function(rows){
    var flatten = [];
    angular.forEach(rows, function(row){
      subrows = row.subrows;
      delete row.subrows;
      flatten.push(row);
      if(subrows){
        angular.forEach(subrows, function(subrow){
          flatten.push( angular.extend(subrow, {subrow: true}) );
        });
      }
    });
    $scope.flatten = flatten;
  });

}

HTML：

<table>
  <tr ng-repeat="row in flatten">
    <td>
      {{row.name}}
    </td>
  </tr>
</table>

Plunker

Answer 6

这是一个例子。此代码打印peopeByCity数组中所有人的所有名称。

TS：

export class AppComponent {
  peopleByCity = [
    {
      city: 'Miami',
      people: [
        {
          name: 'John', age: 12
        }, {
          name: 'Angel', age: 22
        }
      ]
    }, {
      city: 'Sao Paulo',
      people: [
        {
          name: 'Anderson', age: 35
        }, {
          name: 'Felipe', age: 36
        }
      ]
    }
  ]
}

HTML：

<div *ngFor="let personsByCity of peopleByCity">
  <div *ngFor="let person of personsByCity.people">
    {{ person.name }}
  </div>
</div>

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

6 个答案: