トリッキーネストされたNG-繰り返し

Question

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

私は車を作ったときに、選択したパッケージを記述するためのテーブルを構築しています。ダークグレーはパッケージ全体（すなわち高級パッケージ）であり、明るい灰色は現在パッケージに含まれているアイテムです。最後に、ニンジンの列は、現在パッケージに入っているものを置き換えることができる「代替」オプションです。たとえば、「Leather Dakota Saddle Brown Stitching」をクリックすると、「Oyster Dakota Leather」が置き換えられます。すべて正常に動作しますが、別の方法で表示する必要があります。

最後にすべての選択肢の一覧だけではなく、現在選択されている各項目（該当する場合）の正しい親を選択して表示する必要があります。たとえば、代替リムは選択したリムの下に直接表示する必要があります。選択した革の下に別の革を直接表示する必要があります。

私のコードを投稿すると多くの助けになりますが、下をご覧ください。基本的に私が探しているのは、現在のパッケージ内容を繰り返して、それが革、車輪などであるかどうかを比較する方法があるかどうかを調べることです。代わりに選択肢の繰り返しが終了したら、パッケージで選択されている次の項目に戻ります。私はこれを使いこなしてみたが、解決策や戦略を見つけることはできないようだ。

私はそれが見えるしたいと思いますどのように

：

ラグジュアリーパッケージ

• パッケージアイテム：18" リム
  • Altキーアナル1
  • Altキーアナル2
  • Altキーアナル3
• パッケージアイテム：ダコタレザー
  • 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つの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>