Search code examples
angularjsangularjs-scope

Tricky Nested ng-repeat

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

I am building tables to describe packages selected when making a car. The dark grey is the whole package(ie luxury package), the lighter grey is the items that are currently included in the package. Lastly, the rows with carrots are the 'alternative' options that can replace something that is currently in the package. For example, you can click the 'Leather Dakota Saddle Brown Stitching' and it would replace the 'Oyster Dakota Leather'. Everything works correctly but i need to display it differently.

I need to show the alternatives for each currently selected item(if applicable) under its correct parent, as opposed to just a list of all alternatives at the end. For example, the alternative rims should be displayed directly under the selected rims, the alternative leathers should be displayed directly under the selected leather, etc.

I am not sure that posting my code will help much but please see below. Basically what i am looking for is to find out if there is a way to start repeating through current package content, then compare the alternatives to see if it is a leather, wheel, etc as the parent is...if it is, repeat over the alternatives. Once finished repeating over the alternatives, move back to the next item that is selected in the package. I have tried messing around with this and cannot seem to find a solution/strategy.

How i would like it to appear:

Luxury package

  • package item: 18" rims
    • Alt Rim 1
    • Alt Rim 2
    • Alt Rim 3
  • package item: dakota leather
    • 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>

My Table

Solution

  • I was able to fix this with the following code. Basically, what it came down to was not using a table but instead making my own table with div's. This way i was able to provide the full scope 3 layers down the table, while with a standard table i was only able to go two 2 layers deep.

      <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>