Search code examples
angularjsangularjs-ng-repeatngtableangular-filters

Angular ng-repeat dependent on prior ng-repeat


Ive been stuck on this problem for two days now and havent been able to find the right question/example to help me solve the problem.

Basically Im trying to generate a list of categories using ng-repeat and sometimes those categories have subcategories. When a subcategory is present it should appear, and when there is not one it should not appear.

Also, I need these to be generated with <%tr%> tags. (I was able to almost get it to work as needed with the 'GroupBy' directive, but couldnt get it to work with <%tr%> tags).

http://plnkr.co/edit/0Yjp4B9y0STsm6NZQGBk

<table ng-table="tableParams" class="table">
<tbody >

<tr ng-repeat-start="user in steps | filter:categoryFilter" ng-class="{subcategory:user.SubCategory==1}">
    <td data-title="'Step Name'" ng-class="{textcolorpink:user.SubCategory==1,textcolorblue:user.SubCategory==0}">
        {{user.CategoryName}}
    </td>
    <td data-title="'SubStep'" ng-class="{textcolorwhite:user.SubCategory==0}">
        {{user.CategoryName}}
    </td>

</tr>

<tr ng-repeat-start="subuser in steps | filter:subcategoryFilter" ng-class="{subcategory:subuser.SubCategory==1}">
    <td data-title="'Step Name'" ng-class="{textcolorpink:subuser.SubCategory==1,textcolorblue:subuser.SubCategory==0}">
        {{subuser.CategoryName}}
    </td>
    <td data-title="'SubStep'" ng-class="{textcolorwhite:subuser.SubCategory==0}">
        {{subuser.CategoryName}}
    </td>

</tr>
<tr ng-repeat-end ng-hide="true"></tr>
<tr ng-repeat-end ng-hide="true"></tr>

</tbody>

This plunker should look something like this:
Main Category 1
-------Subcategory of 1
-------Subcategory of 1
-------Subcategory of 1
Main Category 2
Main Category 3
-------Subcategory of 3
-------Subcategory of 3
-------Subcategory of 3
Main Category 4
Main Category 5
Main Category 6
Main Category 7
Main Category 8


Solution

  • ng-hide="subuser.MainCategory !== user.index_id"
    

    Plunker: http://plnkr.co/edit/NWL3K7ZMr6qgd9MFWG3N?p=preview

    I hope this is what you're looking for. I'm not exactly sure what you're trying to accomplish with all of your code, but this will hide any items that are not a subcategory of the item they're nested within.

    If you have options to change your data model, you could nest subCategories within mainCategories. Nested ng-repeats tend to work very well and it's cleaner than using ng-hide.