访问嵌套的ng-repeat变量

时间:2016-07-24 16:59:01

标签: angularjs

这是我到目前为止所做的:

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

基本上,我只想在与标题具有相同类别的main.ingredients中显示项目,但是一旦我使用新的ng-repeat,我就无法访问{{storeSection.category}}。有什么想法吗?

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分: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>

不要插入storeSection.categoryng-if适用于angular-expressions,就像左手操作数ingredient.storeSection正在接受评估一样

答案 2 :(得分:0)

正如另一个答案中所指出的,问题的原因是您在interpolation指令中使用了ngIf,而angular-expressions指令与ngIf一起使用。

<强>提示:

优选使用ngShow代替<div>(在您的第一个ngIf中)。

我还建议您使用ngRepeat<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> 中的Visual Studio 2015 Update 3来使用原生filter代替此检查,并使用ngRepeat#special-repeats

所以你可以这样:

netstandard