how to deal with an if statement in a loop in AngularJS?

Problem

i have this 2 loops

    <ion-list>
      <ion-item ng-repeat="category in categories" href="#">
        {{category.name}} {{category.id}}
          <ion-item ng-repeat="test in tests" href="#">
              {{test.name}} {{test.cat_id}}
          </ion-item>
      </ion-item>
    </ion-list>

i want to test if(category.id === test.cat_id) then show the second list

i'm not sure if and how to use ngif, or if i should take care of this in the controller and return one object already formatted for my needs..

any ideas?

Problem courtesy of: Patrioticcow

Solution

If I understand correctly you want to conditionally show the second ng-repeat. If that is the case then you can use this:

<ion-list>
  <ion-item ng-repeat="category in categories" href="#">
    {{category.name}} {{category.id}}
      <ion-item ng-repeat="test in tests" href="#" ng-if="category.id === test.cat_id">
          {{test.name}} {{test.cat_id}}
      </ion-item>
  </ion-item>
</ion-list>

Another option would be to use a filter like this:

<ion-list>
  <ion-item ng-repeat="category in categories" href="#">
    {{category.name}} {{category.id}}
      <ion-item ng-repeat="test in tests | filter: {cat_id: category.id}" href="#" ng-if="category.id === test.cat_id">
          {{test.name}} {{test.cat_id}}
      </ion-item>
  </ion-item>
</ion-list>

I would actually recommend the filter option.

Solution courtesy of: Jon Snow

Discussion

What about something like this?

<ion-list>
  <ion-item ng-repeat="category in categories" href="#">
    {{category.name}} {{category.id}}
      <ion-item ng-repeat="test in tests | filter:{cat_id: category.id}" href="#">
          {{test.name}} {{test.cat_id}}
      </ion-item>
  </ion-item>
</ion-list>
Discussion courtesy of: spacemigas

This recipe can be found in it's original form on Stack Over Flow.