Tricky嵌套ng-repeat

Question

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

我在建立表格来描述制作汽车时选择的包装。深灰色是整个包装（即奢侈品包装），浅灰色是目前包装中的物品。最后，胡萝卜行是'替代'选项，可以取代目前包装中的东西。例如，您可以点击'Leather Dakota Saddle Brown Stitching'，它将取代'牡蛎达科他皮革'。一切工作正常，但我需要以不同的方式显示它。

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

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

如何我想它出现：

豪华包

• 包项目：18" 轮缘
  • Alt键辋1
  • Alt键轮辋2
  • Alt键轮辋3
• 包项目：Dakota真皮
  • Alt键皮革1
  • Alt键皮革2
  • Alt键皮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

我能够固定这个机智h下面的代码。基本上，它最终没有使用表格，而是用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>