Question

这是我的代码。

<div class="panel-body">
<div class="row">
    <div class="col-lg-12">
        <div class="table-responsive">
            <div id="exportable">
                <table class="table table-striped table-bordered table-hover dataTable" id="example">
                    <thead>
                        <tr>

                            <th style="background-color: #f5f5f5;">Device Number</th>

                            <th style="background-color: #f5f5f5;">Name</th>
                            <th style="background-color: #f5f5f5;">MobileNumber</th>



                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="obj in SubscriptionList">
                            <td>
                                <button ng-if="obj.expanded" ng-click="obj.expanded = false">-</button>
                                <button ng-if="!obj.expanded" ng-click="obj.expanded = true">+</button>
                            </td>

                            <td>{{ obj.DEVICENUMBER}}</td>

                            <td>{{ obj.NAME}}</td>
                            <td>{{ obj.MOBILENUMBER}}</td>

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

        <!-- /.table-responsive -->

    </div>

</div>
<!-- /.row -->

结果就像

Name Mobile Device
A    112     Nokia
A    112     Samsung
B    111     Videocon
B    111     LG

我想在Name上有一个展开按钮，当我在下面展开时，所有细节都会显示

Answer 1

您可以使用ng-repeat-start和ng-repeat-end，并使用tr在表格中添加额外的ng-if。这样当你点击按钮时，在按住按钮的那一行下面会有一个额外的行。

  <div class="row">
      <div class="col-lg-12">
          <div class="table-responsive">
              <div id="exportable">
                  <table class="table table-striped table-bordered table-hover dataTable" id="example">
                      <thead>
                          <tr>
                              <th style="background-color: #f5f5f5;">Device Number</th>
                              <th style="background-color: #f5f5f5;">Name</th>
                              <th style="background-color: #f5f5f5;">MobileNumber</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr ng-repeat-start="obj in SubscriptionList">
                              <td>
                                  <button ng-if="obj.expanded" ng-click="obj.expanded = false">-</button>
                                  <button ng-if="!obj.expanded" ng-click="obj.expanded = true">+</button>
                              </td>
                              <td>{{ obj.DEVICENUMBER }}</td>
                              <td>{{ obj.NAME }}</td>
                              <td>{{ obj.MOBILENUMBER }}</td>
                          </tr>
                          <tr ng-repeat-end ng-if="obj.expanded">
                            <td colspan="4">expanded</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
  </div>

我怎样才能将ng-repeat作为组进行？

1 个答案: