Question

https://jsfiddle.net/n4qq4vxh/97/

我正在构建表格来描述制作汽车时选择的包裹。深灰色是整个包装（即豪华包装），浅灰色是当前包含在包装中的物品。最后，带有胡萝卜的行是“替代”选项，可以替换当前包中的内容。例如，您可以单击“皮革Dakota马鞍棕色缝合”，它将取代'Oyster Dakota Leather'。一切正常，但我需要以不同的方式显示它。

我需要在其正确的父项下显示每个当前所选项目（如果适用）的替代方案，而不是最后列出所有替代方案。例如，替代轮辋应直接显示在选定的轮辋下，替代皮革应直接显示在所选皮革下等。

我不确定发布我的代码会有多大帮助，但请参阅下文。基本上我正在寻找的是找出是否有办法开始重复当前的包装内容，然后比较替代品，看看它是皮革，轮子等，因为父母是...如果是，重复替代方案。完成对替代方案的重复后，返回到包中选择的下一个项目。我试过搞乱这个，似乎无法找到解决方案/策略。

我希望它出现：

豪华套餐

包装项目：18“轮辋
- Alt Rim 1
- Alt Rim 2
- Alt Rim 3
包装项目：达科他皮革
- Alt leather 1
- Alt leather 2
- Alt leather 3

<tbody ng-repeat="package in allOptions | orderBy: 'listPrice'" ng-if="package.isPackage">
  <tr class="hover" ng-class="{'selected':isSelected(package)}" ng-click="addRemoveOption(package)" **MAIN PACKAGE **>
    <td> {{ package.code }} </td>
    <td> {{ package.name }} </td>
    <td> {{ package.listPrice | currency }} </td>
    <td> {{ package.disclaimer }} </td>
    <td> {{ package.salesGroup.name }} </td>
    <td> {{ package.optionPrev }} </td>
    <td> {{ package.familyCode }} </td>
  </tr>
  <tr ng-repeat="item in package.packageItems" ng-class="{'nested-selected':isSelected(package)}" id="nested" ** CURRENT PACKAGE CONTENT **>
    <td> {{ item.code }} </td>
    <td> {{ item.name }} </td>

    <td> {{ item.comboPrice | included }} </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <!-- ng-if="hasAlternatives(package.packageItems)" -->
  <tr ng-if="package.packageItems.alts.length" class="nested-alt" ng-repeat="alt in package.packageItems.alts" ng-click="addPackageOption(alt,package)" ng-hide="!isSelected(package)">
    ** ALTERNATIVES **

    <td><span class="glyphicon glyphicon-menu-right" ng-click="addPackageOption(alt,package)"></span></td>
    <td> {{ alt.code }} </td>
    <td> {{ alt.name }} </td>
    <td> {{ alt.price | included }} </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody>

Answer 1

我能够使用以下代码修复此问题。基本上，它归结为不是使用表格而是使用div制作我自己的表格。通过这种方式，我能够在桌面下方提供全范围的3层，而使用标准桌面，我只能进行两层2层深度。

  <h3>{{ tableName }}</h3>


    <div class="flx flx-column hover packageTable"
     ng-repeat="package in list | orderBy: 'listPrice' track by $index"
     ng-class="{'selected': package.isSelected}"
     ng-click="addRemoveOption(package)">
     <div class="flx flx-row" id="anchor{{$index}}">
    <div class="flx-cell-1">{{ package.code }}</div>
    <div class="flx-cell-1">{{ package.name }}</div>
    <div class="flx-cell-1">{{ package.listPrice | currency}}</div>
    <div class="flx-cell-2">{{ package.disclaimer }}</div>
    <div class="flx-cell-1">{{ package.salesGroup.name }}</div>
    <div class="flx-cell-1">{{ package.optionPrev }}</div>
    <div class="flx-cell-1">{{ package.familyCode }}</div>
    </div>

  <br>

        <div class="flx flx-column" ng-repeat="item in package.packageItems track by $index"
       ng-class="{'package-nested-selected': package.isSelected}"
  >
         <div class="flx flx-row" id="nested">
         <div class="flx-cell-1">{{ item.code }}</div>
         <div class="flx-cell-1">{{ item.listPrice | included }}</div>
         <div class="flx-cell-2">{{ item.name }}</div>
       <div class="flx-cell-1"></div>
       <div class="flx-cell-1"></div>
       <div class="flx-cell-1"></div>
    </div>

      <div class="flx flx-row package-nested-alt"
         ng-if="item.alts.hasOwnProperty(item.code)"
         ng-hide="!package.isSelected"
         ng-repeat="alt in item.alts[item.code] track by $index"
         ng-click="addPackageOption(alt, package, $event)"
    >
      <div class="flx-cell-1" id="packageArrow"><span class="glyphicon glyphicon-menu-right" /></div>
      <div class="flx-cell-1">{{ alt.code }}</div>
      <div class="flx-cell-1">{{ alt.price | included }}</div>
      <div class="flx-cell-2">{{ alt.name }}</div>
      <div class="flx-cell-1"></div>
      <div class="flx-cell-1"></div>
      <div class="flx-cell-1"></div>
      <!--<div class="flx-cell-1"></div>-->
    </div>
  </div>

</div>

棘手的嵌套ng-repeat

1 个答案: