在扩展行上搜索引导表

Question

我有一个扩展行的引导表。每行可以扩展为多行，并且这些行也可以在多行中扩展（总共3个级别）。

搜索确实在第3级找到了项目，但它没有正确显示它们。

这是codepen上的示例代码。 https://codepen.io/anon/pen/gGOOBz

我的HTML代码是：

＆＃13;

＆＃13;

<table st-table="displayedCollection" st-safe-src="domains" class="table table-condensed" style="border-collapse:collapse;">
  <thead>
    <tr>
      <th st-sort="name">Domains</th>
    </tr>
    <tr>
      <th colspan="5"><input st-search="" class="form-control" placeholder="Search ..." type="text" /></th>
    </tr>
  </thead>
  <tbody ng-cloak>
    <tr ng-repeat-start="row in displayedCollection">
      <td id="package1-{{$index}}" class="accordion-toggle data-exists cursor-pointer" data-toggle="collapse" data-parent="#OrderPackages-{{$index}}" data-target=".packageDetails1-{{$index}}">{{row.name}}
      </td>
    </tr>
    <tr ng-repeat-end>
      <td id="package2-{{$index}}" colspan="3">

        <div class="accordion-body collapse packageDetails1-{{$index}} + 1">

          <table st-table="beansCollection" st-safe-src="types" class="table table-condensed" style="border-collapse:collapse;">
            <!--<thead>
                            <tr>
                                <th st-sort="name">Types</th>
                            </tr>
                            </thead>-->
            <tbody>
              <tr ng-repeat-start="beanType in row.beans">
                <td id="type1-{{$index}}" class="accordion-toggle" data-toggle="collapse" data-parent="#typePackages-{{$index}}" data-target=".typesDetails1-{{$index}}">

                  {{beanType.name}}
                </td>
                <td align="right">
                  <button ng-click="getBeanName(beanType.name, null, beanType)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default" ng-if="showButton(beanType.beans)">
                                        Display
                                    </button>
                </td>
              </tr>
              <!---->
              <tr ng-repeat-end ng-visible="false">

                <td id="typeId2-{{$index}}" colspan="3">
                  <div class="accordion-body collapse typesDetails1-{{$index}} + 1">
                    <table class="table table-condensed">
                      <tbody>
                        <tr ng-repeat="leafBean in beanType.beans">
                          <td>
                            {{leafBean.name}}
                          </td>
                          <td align="right">
                            <button ng-click="getBeanName(beanType.name, leafBean.name, leafBean)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default">Display</button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

我希望当我在某一行下搜索某些内容时，它会显示上面已经展开的行。

PHOTO：

说我想搜索第三级的TBLEXCHANGEMEMBERSHIPS。 当我将其输入搜索栏时，它会找到它，但不能正确显示它。

我该怎么办？