Angular JS table 中一行中的行与 ng-repeat

Question

我有一个 table 像这样。在每个程序中，我都有多种形式。每个表单都有一个名称、一个默认 YES/NO 字段（如果是，则为勾号）和一个状态字段 ACTIVE/INACTIVE。

然而，问题是我当前的代码弄乱了对齐方式。红线表示应排成一行的所有项目。

我的代码如下：

<div class="scrollContainer">
<div class="fixedHeaderSection">
    <table class="table columnHeadings" style="table-layout: fixed">
        <tbody>
        <tr>
            <td class="col-md-4 col-sm-4 col-xs-4">
                Program
            </td>
            <td class="col-md-4 col-sm-4 col-xs-4">
                Forms
            </td>
            <td class="col-md-1 col-sm-1 col-xs-1">
            </td>
            <td class="col-md-3 col-sm-3 col-xs-3">
                Status
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="scrollableSection">
    <table class="table columnData" style="table-layout: fixed">
        <tr ng-repeat="program in programsList">
            <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                {{program.name}}
            </td>
            <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                <li ng-repeat="form in program.forms" style="list-style:none;">
                    {{form.name}}
                </li>
                + New Form
            </td>
            <td style="word-wrap: break-word;" class="col-md-1 col-sm-1 col-xs-1">
                <li ng-repeat="form in program.forms" style="list-style:none;">
                    <span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span>
                </li>
            </td>
            <td style="word-wrap: break-word;" class="col-md-3 col-sm-3 col-xs-3">
                <li ng-repeat="form in program.forms" style="list-style:none;">
                    {{form.status}}
                </li>
            </td>
        </tr>
    </table>
</div>

我该如何解决这个问题？

Answer 1

问题很可能是您希望 li 元素在 'correct' 行中对齐。但这并不能以任何方式保证，因为长li文本会被分解，而下一列中的列表无法知道这一点。

您应该考虑为程序中的每个表单向 table 添加更多行，并在第一列使用 rowspan 或其他内容。

有点乱，但应该完成。

Link 到 "working" plnkr : http://plnkr.co/edit/Q9Ikmo3GVvtm3MdYlPNY?p=preview

  <table class="table columnData" style="table-layout: fixed" border="1">
    <tr ng-repeat-start="program in programsList">
      <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4" rowspan="{{program.forms.length + 1}}">
        {{program.name}}
      </td>
      <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
        + New Form
      </td>
      <td style="word-wrap: break-word;" class="col-md-1 col-sm-1 col-xs-1">
      </td>
      <td style="word-wrap: break-word;" class="col-md-3 col-sm-3 col-xs-3">
      </td>
    </tr>
    <tr ng-repeat-end ng-repeat="form in program.forms">
      <td>
        {{form.name}}
      </td>
      <td><span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span></td>
      <td>{{form.status}}</td>
    </tr>
  </table>

Answer 2

你可以试试这个。我删除了li并使用了"rowspan"。您使用了 2 个表，所以我只使用一个 (thead + tbody)

更正了它

<div class="scrollContainer">
        <table class="table columnHeadings" style="table-layout: fixed">
        <div class="fixedHeaderSection">
        <thead>
        <tr>
            <th class="col-md-4 col-sm-4 col-xs-4">
                Program
            </th>
            <th class="col-md-4 col-sm-4 col-xs-4">
                Forms
            </th>
            <th class="col-md-1 col-sm-1 col-xs-1">
            </th>
            <th class="col-md-3 col-sm-3 col-xs-3">
                Status
            </th>
        </tr>
        </thead>
        </div>
        <tbody>
        <div class="scrollableSection">

        <tr ng-repeat="program in programsList">
            <td rowspan="program.forms.length" style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                {{program.name}}
            </td>
            <td ng-repeat="form in program.forms" style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                {{form.name}}
                + New Form
            </td>
            <td ng-repeat="form in program.forms" style="word-wrap: break-word;" class="col-md-1 col-sm-1 col-xs-1">
                <span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span>
            </td>
            <td ng-repeat="form in program.forms" style="word-wrap: break-word;" class="col-md-3 col-sm-3 col-xs-3">
                {{form.status}}
            </td>
        </tr>

        </div>
        </tbody>
    </table>

Answer 3

如果您不关心重组 HTML，这可能是最简单的解决方案。

<tr ng-repeat="program in programsList">
    <td class="col-md-4 col-sm-4 col-xs-4">
        {{program.name}}
    </td>
    <td class="col-xs-8">
        <div ng-repeat="form in program.forms">
            <div class="col-md-4 col-sm-4 col-xs-4">
                {{form.name}}
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1">
                <span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                {{form.status}}
            </div>
        </div>
        <div>
            + New Form
        </div>
    </td>
</tr>

这个例子可能需要稍微调整一下，因为这是未经测试的。重点是对 'program.forms'.

使用 单循环

Angular JS table 中一行中的行与 ng-repeat

Rows within a row in Angular JS table with ng-repeat

html

angularjs

angularjs-ng-repeat