帶有對齊列的AngularJS可擴展表格

對於使用ng-repeat可以找到可擴展表格的每個示例，擴展行都是「獨立」內容，例如詳細信息行內的獨立表格。我做了使用這些方法，這是許多可擴展的表像帶有對齊列的AngularJS可擴展表格

<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截圖：

灰色行是白色行的孩子。我可以像我的代碼示例那樣訪問數據，但不能使列對齊。

我已經嘗試了幾種方法，但目前爲止似乎沒有任何工作。

來源

2016-10-12 Steve

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" 
    } 
]

}，...

來源

2016-11-02 13:38:10 Steve

您可以使用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>

來源

2016-10-12 18:00:36

這給了我這個想法來完成這一點，雖然你在這裏的代碼並沒有很好的工作。 – Steve

您可以使用<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>

來源

2016-10-12 18:07:47 kicken

帶有對齊列的AngularJS可擴展表格

回答

相關問題