Question

我的页面有几个类别，内容存储在JSON文件中。在页面加载时，类别没有内容。单击类别标题时，将加载其内容。再次单击或单击其他类别时，应删除其内容。

在我当前的草图(Plunkr)上，ng-click上的内容加载有效，但所有类别都填充了所点击类别的内容。我这样称呼它：

  <div ng-controller="FoodCtrl">
    <h3 ng-click="loadFood('food1')">Food 1</h3>

       <div class="food origin">
              <food-list />
       </div>

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

          <div class="food origin">
               <food-list />
          </div>

  </div>

我可以看到的问题是，我没有限制加载到<food-list />的内容的范围，因此两个列表都获得相同的内容。如何对此进行重组以使<food-list />具有“当前活动类别”的上下文？ “切换”功能（like this JSFiddle）会更好地发挥作用吗？

Answer 1

新手AngularJS用户使用我控制器中已有的变量category发现了ng-show的魔力：

  <div ng-controller="FoodCtrl">
     <h3 ng-click="loadFood('food1')">Food 1</h3>

     <div class="food origin">
        <food-list ng-show="category == 'food1' "  />
     </div>

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

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

  </div>

AngularJS“手风琴”loading＆amp;使用ng-click卸载DOM元素

1 个答案: