1

我的页面有几个类别，内容存储在 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 />具有“当前活动类别”的上下文？“切换”功能（比如这个 JSFiddle）会更好地工作吗？

4

1 回答 1

1

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

  <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>
于 2013-10-31T15:02:00.493 回答