Question

我想在ng-repeat中显示一个带有标题值的表。我目前的代码如下

<table>
                        <div class="panel-body">
                        <div class="modal-body">
                              <table class="table">

                                <tr>
                                    <td>Leave Application Date</td>
                                    <td>Date from:</td>
                                    <td>Date To:</td>
                                    <td>Status</td>
                                    <td>Employee Name</td>
                                </tr>
                                <tr ng-repeat="leaveApp in leaveApplicationCollection" class="row">


                                    <td>
                                        <table>
                                            <tr>
                                                <td >{{leaveApp.leaveApplicationDate}}</td>
                                                <td >{{leaveApp.dateFrom}}</td>
                                                <td >{{leaveApp.dateTo}}</td>
                                                <td >{{leaveApp.status}}</td>
                                                <td >{{leaveApp.employee.fullName}}</td>
                                                <td><a ng-click="showLeaveDetails(leaveApp.id)"><span><i class='icon-search3 pull-left'></i></span></a>
                                                <a ng-click="showLeaveCancelModal(leaveApp.id)"><i class='icon-cancel-circle'></i></a>
                                                </td>

                                            </tr>
                                            <tr>
                                                <td ng-show=isIdActive(leaveApp.id)>Leave App details</td>
                                            </tr>
                                        </table>
                                    </td>
                                    </div>



        </tr>

    </table>

问题是它显示第一个标题下的整个第二个表，其他标题不包含数据。

我想知道是否可以使用$ first来设置标题。

请提出解决方案。

PS：我有一个约束。

我必须将第二张表放在td中。这是因为我需要显示一个元素，让我们说“保留应用程序详细信息”。单击“保留应用程序”行时，将显示在该行的正下方。这是我的约束。

Answer 1

您可以使用<thead>和<tbody>标记，如下所示：

<table class="table table-bordered">
  <thead>
    <tr class=row>
      <td>Leave Application Date</td>
      <td>Date from:</td>
      <td>Date To:</td>
      <td>Status</td>
      <td>Employee Name</td>
      <td></td>
    </tr>
  </thead>
  <tbody ng-repeat="leaveApp in leaveApplicationCollection">
    <tr class="row">
      <td>{{leaveApp.leaveApplicationDate}}</td>
      <td>{{leaveApp.dateFrom}}</td>
      <td>{{leaveApp.dateTo}}</td>
      <td>{{leaveApp.status}}</td>
      <td>{{leaveApp.employee.fullName}}</td>
      <td>
        <a ng-click="showLeaveDetails(leaveApp.id)">
          <i class="icon-search3 pull-left"></i>
        </a>
        <a ng-click="showLeaveCancelModal(leaveApp.id)">
          <i class="icon-cancel-circle"></i>
        </a>
      </td>
    </tr>
    <tr class="row" ng-show="isIdActive(leaveApp.id)">
      <td colspan="6">
         Leave App details
         XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </td>
    </tr>
  </tbody>
</table>

另请注意，在第二个colspan="6"内的单个<td>上添加了<tr>属性，以确保跨越所有列。

Example Plunk

Answer 2

试试这个。

onBindViewHolder

Answer 3

它应该按预期工作。

<table><tr><td>
<div class="panel-body">
                        <div class="modal-body">
                              <table class="table">

                                <tr>
                                    <td>Leave Application Date</td>
                                    <td>Date from:</td>
                                    <td>Date To:</td>
                                    <td>Status</td>
                                    <td>Employee Name</td>
                                </tr>
                                <tr ng-repeat="leaveApp in leaveApplicationCollection" class="row">
                                                <td >{{leaveApp.leaveApplicationDate}}</td>
                                                <td >{{leaveApp.dateFrom}}</td>
                                                <td >{{leaveApp.dateTo}}</td>
                                                <td >{{leaveApp.status}}</td>
                                                <td >{{leaveApp.employee.fullName}}</td>
                                                <td><a ng-click="showLeaveDetails(leaveApp.id)"><span><i class='icon-search3 pull-left'></i></span></a>
                                                <a ng-click="showLeaveCancelModal(leaveApp.id)"><i class='icon-cancel-circle'></i></a>
                                                </td>

                                            </tr>
                                            <tr>
                                                <td ng-show=isIdActive(leaveApp.id)>Leave App details</td>
                                            </tr>
                                        </table>
                                    </div></div>
    </td></tr></table>

ng-repeat中的表头值

3 个答案: