使用 Angular 的动态 html 表

【问题标题】：Dynamic html table using Angular使用 Angular 的动态 html 表
【发布时间】：2015-09-03 07:50:39
【问题描述】：

我正在尝试使用 Angular 创建一个动态 html 表。

范围有一个二维数组（称为数组），其中包含用于生成表的数据。

玉：

table(class="table table-striped")
    thead
      tr
        th
          | Header
    tbody
      div(ng-controller="indexCtrl")
        tr(ng-repeat="row in array")
          td(class="row")
            div(ng-repeat="cell in row", class="col-md-6")
              .checkbox
                label
                  input(type="checkbox",name="{{cell.permission}}")
                    | {{cell.name}}

我想要的结果是：

x 框1 x 框2

x 框3 x 框4

目前只生成表头。没有行。我的模板有什么问题？

【问题讨论】：

范围内可能没有名为数组的变量
您是否从后面的代码中将行注入到 $scope.array 中？
有什么错误吗？我们能看到indexCtrl吗？

标签： javascript angularjs angularjs-ng-repeat pug ng-repeat

【解决方案1】：

table 必须有自己的元素，例如td、tr、th、tbody、等等如果你想在table中放置其他元素，你可以在td/th中只放它

您应该将ng-controller 放在tbody 元素上。

table 不允许像您在 tbody 中放置 div 那样的其他元素

table(class="table table-striped")
    thead
      tr
        th
          | Header
    tbody(ng-controller="indexCtrl")
        tr(ng-repeat="row in array")
          td(class="row")
            div(ng-repeat="cell in row", class="col-md-6")
              .checkbox
                label
                  input(type="checkbox",name="{{cell.permission}}")
                    | {{cell.name}}

【讨论】：

只是一个旁注。 table 还允许多次出现 <tbody> 元素。对于诸如分组之类的事情。