Question

对于我可以使用ng-repeat找到可扩展表的每个示例，扩展行是“单独”内容，例如详细行内的独立表。我使用这些方法做了很多可扩展的表，比如

<tr ng-repeat-start="item in faceted.table.data" ng-init="item.showDetails = false" ng-click="faceted.table.showDetailRow($index)">
        <td>
            <a href="" class="table-row-toggle">
                <i class="nc-icon-mini lg fw arrows-2_small-right " ng-class="{'rotate-90': item.showDetails}"></i>
            </a>
        </td>
        <td>{{item.partner_name}}</td>
        <td>{{item.type}}</td>
        <td>>{{m.merchant_name}}</td>
    </tr>
    <tr class="table-details" ng-repeat-end="item in faceted.table.data" ng-if="faceted.table.detailsShown === $index">
        <td></td>
        <td colspan="7">
            <table class="table table-unstyled">
                <tbody>
                    <tr ng-repeat="m in item.merchants">
                        <td>{{m.merchant_name}}</td>
                        <td>{{m.type}}</td>
                        <td>{{m.state}}</td>
                        <td><img src="images/status.svg" alt="status"></td>
                        <td>{{m.modified_by}}</td>
                        <td>{{m.modified_date}}</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>

但是，这次我需要的是“细节”行必须是主表的一部分，因此列对齐，如此Axure屏幕截图所示：

灰色行是白色行的子项。我可以像在我的代码示例中那样访问数据，但不能使列对齐。

我尝试过几种方法，但到目前为止似乎都没有。

Answer 1

您可以使用ng-repeat-start和ng-repeat-end实现此目的。关键区别在于您的详细信息对象需要是父对象的子对象，而不是同一对象的子对象。

<tbody>
  <tr ng-repeat-start="parent in vm.parents">
  <tr class="parent-entry">
    <!-- cells go here ex:{{parent.data}} -->
  </tr>
  <tr class="child-entry" ng-repeat-end ng-if="parent.show">
    <!-- cells go here, ex:{{parent.child.data}}-->
  </tr>
  </tr>
</tbody>

Answer 2

您可以使用<tbody>标记在表中创建部分，一部分用于父行，另一部分用于包含所有子行。只需确保父节和子节之间的列数匹配。

<tbody ng-repeat-start="item in faceted.table.data" ng-init="item.showDetails = false">
    <tr ng-click="faceted.table.showDetailRow($index)">
        <td>
            <a href="" class="table-row-toggle">
                <i class="nc-icon-mini lg fw arrows-2_small-right " ng-class="{'rotate-90': item.showDetails}"></i>
            </a>
        </td>
        <td>{{item.partner_name}}</td>
        <td>{{item.type}}</td>
        <td colspan="4">{{m.merchant_name}}</td>
    </tr>
</tbody>
<tbody ng-repeat-end="item in faceted.table.data" ng-if="faceted.table.detailsShown === $index">
    <tr ng-repeat="m in item.merchants">
        <td></td>
        <td>{{m.merchant_name}}</td>
        <td>{{m.type}}</td>
        <td>{{m.state}}</td>
        <td><img src="images/status.svg" alt="status"></td>
        <td>{{m.modified_by}}</td>
        <td>{{m.modified_date}}</td>
    </tr>
</tbody>

Answer 3

FWIW，我终于通过从其他人的答案开始并将其付诸实践来实现这一目标：

        <table class="table table-datatable table-hover table-border-bottom">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Partner</th>
                <th>Merchants</th>
                <th>Modified</th>
                <th>Status</th>
            </tr>
        </thead>

        <tbody>
            <tr ng-repeat-start="item in mob.dashboardTableData">
                <td>    
                    <i class="nc-icon-mini lg fw arrows-2_small-right " ng-class="{'rotate-90': item.showDetails}"></i>
                </td>
                <td class="text-nowrap">{{item.partner_name}}</td>
                <td><span ng-repeat="m in item.merchants">{{m.merchant_name}}<font ng-if="!$last">, </font></span></td>
                <td>{{item.modified_date}}<br>{{item.modified_by}}</td>
                <td>{{item.status}}</td>
            </tr>
            <tr class="table-details" ng-repeat-end ng-repeat="m in item.merchants">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>{{m.merchant_name}}</td>
                <td>{{m.modified_date}}<br>{{m.modified_by}}</td>
                <td>{{m.status}}</td>
            </tr>
        </tbody>
    </table>

数据的结构如下：

  {
"id": 1,
"partner_name": "Gap Industries",
"type": "Partner",
"state": "New",
"status": 2,
"modified_by": "John Smith",
"modified_date": "2016-04-10 12:37PM",
"merchants": [
  {
    "id": 1,
    "merchant_name": "Gap",
    "type": "Merchant",
    "state": "New",
    "status": 2,
    "modified_by": "John Smith",
    "modified_date": "2016-04-10 12:37PM"
  },
  {
    "id": 2,
    "merchant_name": "American Eagle Outfitters",
    "type": "Merchant",
    "state": "New",
    "status": 2,
    "modified_by": "John Smith",
    "modified_date": "2016-04-10 12:37PM"
  },
  {
    "id": 3,
    "merchant_name": "Old Navy",
    "type": "Merchant",
    "state": "New",
    "status": 2,
    "modified_by": "John Smith",
    "modified_date": "2016-04-10 12:37PM"
  }
]

}，...

AngularJS可扩展表，具有对齐列

3 个答案: