CODEWITHSUNDEEP
angularjs
Cole Beckwith
Cole Beckwith

Reputation: 61

Accessing a nested ng-repeat variable

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?

Upvotes: 0

Views: 151

Answers (3)

developer033
developer033

Reputation: 24864

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>

Upvotes: 0

Robin-Hoodie
Robin-Hoodie

Reputation: 4974

<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

Upvotes: 0

Parv Sharma
Parv Sharma

Reputation: 12705

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

Upvotes: 1

Related Questions