Javascript AngularJS：使用ng if仅加载必要的DOM元素

单击标题时，我的页面通过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>

食品1 食物2 这会将当前类别的内容加载到所有食物列表中，但会隐藏不活动的食物列表-因此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>

食品2 然后我将当前类别的内容加载到所有food origin div中，所有类别都显示出来

重做此操作的最佳方法是什么，以便一次仅将当前活动类别的内容加载到DOM中

更新

---

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

如果您单击食物标题，plunker将抛出错误。是的，断开的滑块插件正在断开ng if语句。移除滑块插件修复了它，现在可以正常工作了。