AngularJS中仅用HTML实现ng-repeat父子行关联的技术问询

我来帮你搞定这个问题！你想仅用AngularJS的HTML模板实现父子行的层级关联，核心问题在于折叠组件的ID匹配逻辑错误，以及当前的ng-repeat没有区分父行和子行的层级关系。下面是具体的修改方案：

关键问题分析 #

1. 你当前的ng-repeat把所有行都当成同级渲染，没有区分父行（IsSubSector=false且GenericID=0）和子行（IsSubSector=true且GenericID对应父行ID）
2. 父行的id属性写错了：id="row.Id"会把字符串row.Id当成固定ID，而不是插值后的实际行ID，应该写成id="{{row.Id}}"
3. data-parent的取值逻辑错误，没有正确关联到父行的唯一标识，导致折叠组件无法识别父子关系

修改后的完整代码示例 #

<div class="container-fluid grid-padded">
  <table ng-table="roboticEditTable" class="table table-responsive table-condensed" style="width: 99.9% !important" show-filter="true" id="sector-table">
    <tbody>
      <!-- 渲染父行：匹配IsSubSector=false且GenericID=0的行 -->
      <tr ng-repeat="parentRow in $data | filter: {IsSubSector: false, GenericID: 0}" 
          id="parent-{{parentRow.Id}}" 
          ng-click="changeSelection(parentRow, $index)" 
          ng-class=" { 'active': parentRow.$selected } ">
        <td title="RoboticEditTitle" class="text-center">
          <div ng-show="editIndex!==$index">
            <button ng-show="parentRow.SectorDescription === 'None'" type="button" class="btn btn-xs btn-default clickable" 
                    data-toggle="collapse" 
                    data-target="#collapse-{{parentRow.Id}}" 
                    uib-tooltip-placement="top" 
                    ng-disabled="performingAction" 
                    uib-tooltip-append-to-body="true" 
                    uib-tooltip="<%= GlobalizationUtil.GetText(GlobalizationKey.Show) %>">
              <i class="fa fa-toggle-down"></i>
            </button>
          </div>
        </td>
        <td title="labels.sector" filter="{'SectorCode': 'text'}" sortable="'SectorDescription'">
          {{ parentRow.SectorCode + ' - ' }} {{ parentRow.SectorDescription }}
        </td>
        <td title="labels.glAccount" filter="{'AccountCode': 'text'}" sortable="'AccountCode'">
          {{ parentRow.AccountCode + ' - ' }} {{ parentRow.RGSCode + ' - ' }} {{ parentRow.AccountDescription | ellipsis }}
        </td>
        <td title="labels.articleCode">{{ parentRow.ArticleCode }}</td>
        <td title="labels.description">{{ parentRow.Description }}</td>
        <td title="labels.percentage">{{ parentRow.VatPercent | percentage }}</td>
      </tr>

      <!-- 渲染子行：匹配IsSubSector=true且GenericID等于当前父行ID的行 -->
      <tr ng-repeat="childRow in $data | filter: {IsSubSector: true, GenericID: parentRow.Id}" 
          class="collapse" 
          id="collapse-{{parentRow.Id}}" 
          data-parent="#sector-table">
        <td class="col-sm-2"></td>
        <td class="col-sm-2" filter="{'SectorCode': 'text'}" style="padding-left:35px;">
          <i class="fa fa-plus" style="padding-right: 10px;"></i> {{ childRow.SectorCode + ' - '}} {{ childRow.SectorDescription }}
        </td>
        <td>{{ childRow.AccountCode + ' - ' }} {{ childRow.RGSCode + ' - ' }} {{ childRow.AccountDescription | ellipsis }}</td>
        <td>{{ childRow.ArticleCode }}</td>
        <td>{{ childRow.Description }}</td>
        <td>{{ childRow.VatPercent | percentage }}</td>
      </tr>
    </tbody>
  </table>
</div>

核心修改点说明 #

1. 区分父子行渲染：用AngularJS的filter指令在ng-repeat里分别筛选父行和子行，子行通过GenericID: parentRow.Id自动关联到对应的父行
2. 修正折叠组件ID绑定：
   • 父行按钮的data-target指向子行容器的唯一ID#collapse-{{parentRow.Id}}
   • 子行的data-parent指向表格容器的ID#sector-table，这是Bootstrap折叠组件的规范用法，确保点击其他父行时当前展开的子行会自动折叠
3. 默认隐藏子行：给子行添加class="collapse"，默认处于隐藏状态，点击父行按钮后展开
4. 修正ID插值：父行的ID改为id="parent-{{parentRow.Id}}"，确保每个父行有唯一标识

这样就能纯靠AngularJS的HTML模板实现你想要的父子行关联折叠效果了！

内容的提问来源于stack exchange，提问作者FritsJ