CODEWITHSUNDEEP
javascriptjqueryangularjs
Faizuddin Mohammed
Faizuddin Mohammed

Reputation: 4328

How to use a control statement (if statement) in a nested ng-repeat directive?

I have the following code in my HTML View:

<div ng-repeat='shop in shops'>
  <ul ng-repeat='item in items'>
    <li>
      <!-- {{Show items of the particular shop in here}} -->
    </li>
  </ul>
</div>

The items is a JSON Object. Every item has a shop_id that has to be used to do the sorting.

According to the documentation, I understand that I cannot use the if control statement in an Angular Expression to achieve what I the sort. How else can I use the control statement.

I tried this, but it obviously failed because we cannot return a continue.

//var resources.items and resources.shops are JSON objects output from a database

//This file is app.js

$scope.itemName = function(itemIndex, shopIndex) {
  for (var i = 0; i < resources.items.length; i++) {
    if (resources.items[itemIndex].shop_id == resources.shops[shopIndex].id)
      return resources.items[itemIndex].name;
  };
  return continue;
}

And, this in the view:

<div class="tab-content" ng-repeat='provider in providers'>
  <ul ng-repeat='item in items'>
    <li>{{itemName($index, $parent)}}</li>
  </ul>
</div>

I'm a beginner in Angular. Please help out.

Upvotes: 0

Views: 48

Answers (1)

allienx
allienx

Reputation: 887

Use the ngIf directive:

<div ng-repeat='shop in shops'>
  <ul ng-repeat='item in items'>
    <li ng-if="item.shop_id === shop.id">
      <!-- {{Show items of the particular shop in here}} -->
    </li>
  </ul>
</div>

Upvotes: 3

Related Questions