Zugriff auf einen verschachtelten ng-repeat Variable

Question

Dies ist, was ich habe, so weit:

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

Grundsätzlich mag ich nur die Elemente in main.ingredients angezeigt werden, die die gleiche Kategorie wie die Header haben, aber ich kann nicht Greife auf {{storeSection.category}} zu, sobald ich eine neue ng-Wiederholung verwende. Irgendwelche Ideen?

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

nicht storeSection.category, nur ng-if Arbeiten mit angular-expressions interpoliert, wie die linken Operanden ingredient.storeSection wird

durch ausgewertet immer die Ursache des Problems in anderen Antworten

Answer 2

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

Answer 3

Wie erwähnt, ist dass Sie interpolation in Ihrer ngIf Direktive verwenden, die mit angular-expressions arbeitet.

Tipps:

Verwendung vorzugsweise ngIf statt ngShow (in Ihrem ersten <div>).

Ich empfehle Ihnen auch die native filter anstelle dieser Prüfung ngIf (in ngRepeat) mit zu verwenden und die ngRepeat#special-repeats zu verwenden.

So können Sie etwas davon haben:

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