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>