Question

在我的网站上，我想创建一个类似于this的导航栏，其中包含类别（此处为2012）和文章（此处为5月至10月）。我有一个包含所有类别（id，name）的JSON对象和一个包含所有文章（id，title，body，category）的JSON对象，这些角色适合我。

目前的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>

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

1 个答案: