Question

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

<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}}。有什么想法吗？

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>

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>

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

Answer 3

正如另一个答案中所指出的，问题的原因是您在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

访问嵌套的ng-repeat变量

3 个答案: