这是我到目前为止所做的:
<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}}。有什么想法吗?
答案 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.category
,ng-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