Accessing a nested ng-repeat variable

Question

This is what I have so far:

<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
      <h4>{{ storeSection.category }}</h4>
      <div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
           ng-if="ingredient.storeSection === {{ storeSection.category }}">
        <p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
          class="ingredient-source">- {{ ingredient.source }}</span></p>
      </div>
    </div>

Basically, I only want to display the items in main.ingredients that have the same category as the header, but I cannot access {{ storeSection.category }} once I use a new ng-repeat. Any ideas?

Why use interpolation? Just use storeSection.category, ng-if works with an angular expression — Robin-Hoodie
– Robin-Hoodie, Commented Jul 24, 2016 at 17:00
I answered the same thing below, if this solved your question, you can mark it as accepted — Robin-Hoodie
– Robin-Hoodie, Commented Jul 24, 2016 at 17:12

Parv Sharma · Accepted Answer · 2016-07-24 17:02:09Z

1

<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
      <h4>{{ storeSection.category }}</h4>
      <div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
           ng-if="ingredient.storeSection === storeSection.category">
        <p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
          class="ingredient-source">- {{ ingredient.source }}</span></p>
      </div>
    </div>

answered Jul 24, 2016 at 17:02

Parv Sharma

12.7k5 gold badges52 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robin-Hoodie · Accepted Answer · 2016-07-24 17:03:00Z

0

<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
      <h4>{{ storeSection.category }}</h4>
      <div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
           ng-if="ingredient.storeSection === storeSection.category ">
        <p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
          class="ingredient-source">- {{ ingredient.source }}</span></p>
      </div>
    </div>

Don't interpolate storeSection.category, ng-if works with angular-expressions just like the left-hand operandingredient.storeSection is getting evaluated by it

answered Jul 24, 2016 at 17:03

Robin-Hoodie

4,9944 gold badges33 silver badges65 bronze badges

Comments

developer033 · Accepted Answer · 2016-07-24 17:50:13Z

As pointed out in another answers, the cause of the problem is that you're using interpolation in your ngIf directive, which one works with angular-expressions.

Tips:

Use preferably ngIf instead of ngShow(in your first <div>).

I also recommend you to use the native filter instead of this check using ngIf(in ngRepeat) and to use the ngRepeat#special-repeats.

So you can have something like this:

<div ng-repeat-start="storeSection in main.foodBySection" ng-if="main.sortBy === 'storeSection'">
  <h4 ng-bind="storeSection.category"></h4>
</div>
<div ng-repeat-end ng-repeat="ingredient in main.ingredients | filter: { storeSection: storeSection.category } | orderBy: 'name'">
  <p>
    <input type="checkbox" ng-model="ingredient.added" /> {{ ingredient.name }} <span class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>

Collectives™ on Stack Overflow

Accessing a nested ng-repeat variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related