动态更新的菜单栏按类别划分

Question

在我的网站上，我想制作一个导航栏，就像 this 一样，包含类别（此处为 2012 年）和文章（此处为 5 月至 10 月）。我有一个包含所有类别（id、名称）的 JSON object 和一个包含所有文章（id、标题、body、类别）的 angular我.

当前HTML如下：

<!-- The angular controllers are already initialized before this piece of code -->
<div class="menubar">
  <ul>
    <li class="cat" ng-repeat="infocategory in info.infocategories">
      {{infocategory.name}}
      <ul>
        <li class="arti" ng-repeat="infoentry in info.infoentries">
          <!-- The link links to a function that sets the correct tab -->
          <a href ng-click="tab.setTab({{infoentry.id}})">{{infoentry.title}}</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

和JavaScript：

app.controller('InfoController', ['$http', function($http){
    var info = this;
    info.infocategories = [];
    info.infoentries = [];

    // This all works correctly
    $http.get(api + 'info_categories?pageSize=20&pageNumber=1').success(function(data){
        info.infocategories = data.data;
    });

    $http.get(api + 'info_posts?pageSize=20&pageNumber=1').success(function(data){
        info.infoentries = data.data;
    });
}]);

然而，如您所想，此代码显示类别下的所有个条目，但我只想显示属于特定类别的条目。

我是 AngularJS 的新手，非常感谢您的帮助。如果有任何代码缺失或不清楚，请告诉我。提前致谢！

Answer 1

没关系，我已经自己修好了。我想我想的太难了...

<div class="menubar">
    <ul>
        <li class="cat" ng-repeat="infocategory in info.infocategories">
            {{infocategory.name}}
            <ul>
                <li class="arti" ng-repeat="infoentry in info.infoentries" ng-show="infoentry.cat == infocategory.id">
                    <a href ng-click="tab.setTab(infoentry.id)">{{infoentry.title}}</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

动态更新的菜单栏按类别划分

Dynamically updated menubar divided in categories

html

navigation

angularjs

angularjs-ng-repeat