javascript - AngularJS "accordion"使用 ng-click 加载和卸载 DOM 元素

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 新手用户使用 Controller 中已有的变量 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>