0

单击头部时，我的页面通过 AJAX 调用加载类别的内容。现在，我正在使用 ng-show 仅显示当前类别：

<h3 ng-click="loadFood('food1')" id="food1">Food 1</h3>   
 <div class="food origin">
        <food-list ng-show="category == 'food1' " />
 </div>

<h3 ng-click="loadFood('food2')" id="food2">Food 2</h3>
    <div class="food origin">
         <food-list  ng-show="category == 'food2' " />
   </div>

这会将当前类别的内容加载到所有食物列表中，但隐藏不活动的内容 - 所以 DOM 仍然很大，这是我试图避免的。

我想改用 ng-if，它应该从 DOM 树中添加和删除项目。但我无法让任何 ng-if 语句起作用。如果我直接将 ng-show 换成 ng-if，如下所示：

 <h3 ng-click="loadFood('food2')" id="food2">Food 2</h3>

    <div class="food origin">
         <food-list  ng-if="category == 'food2' " />
</div>

然后我将当前类别的内容加载到所有食物来源 div 中，所有类别都显示出来。

什么是最好的返工方法，以便一次只将当前活动类别的内容加载到 DOM 中？

这是我的 Plunkr。

更新

版本问题。正在使用 1.0.8，直到后来才添加 ng-if。将 Angular 版本更新为 1.2。Ng-if 现在原则上可以工作，但总是返回 false。下一步，将 ng-if 语句设置为 == true。

4

0 回答 0