Question

我想使用JSON对象开发动态菜单系统。为此，我使用了angular-filter.js，但我无法获得正确的输出。这是我期望的输出：

1.Topic 
  page_Name
  - Category
   cate1
    description
   cate2
    descrption
    - SubCategory
       sub1
        description
       sub2
        description

我的app.js是

    angular.module('app',['angular.filter'])
.controller('MainController', function($scope) { 
$scope.items =
      [{"$id":"1",
"userid":1,
"topic":"topic",
"topicOrderId":1,
"category":"cate1",
"catOrderId":1,
"subCategory":"sub1",
"subCatOrderId":1,
"page_Name":"page_Name1",
"pageId":1,
"url":"dashboard/index",
"description":"description1",
"tooltip":"topic1"},

{"$id":"2",
"userid":1,
"topic":"topic",
"topicOrderId":1,
"category":"cate1",
"catOrderId":1,
"subCategory":"sub2",
"subCatOrderId":1,
"page_Name":"page_Name2",
"pageId":1,
"url":"dashboard/index2",
"description":"description2",
"tooltip":"topic2"},

{"$id":"3",
"userid":1,
"topic":"topic",
"topicOrderId":1,
"category":"cate2",
"catOrderId":1,
"subCategory":"sub4",
"subCatOrderId":1,
"page_Name":"page_Name3",
"pageId":1,
"url":"dashboard/index3",
"description":"description3",
"tooltip":"topic4"},

{"$id":"4",
"userid":1,
"topic":"topic",
"topicOrderId":1,
"category":"cate3",
"catOrderId":1,
"subCategory":"sub3",
"subCatOrderId":1,
"page_Name":"page_Name4",
"pageId":1,
"url":"dashboard/index4",
"description":"description4",
"tooltip":"topic4"},

{"$id":"5",
"userid":1,
"topic":"topic",
"topicOrderId":1,
"category":"cate2",
"catOrderId":1,
"subCategory":"sub5",
"subCatOrderId":1,
"page_Name":"page_Name5",
"pageId":1,
"url":"dashboard2/index",
"description":"description5",
"tooltip":"topic5"}];
});

和我的html文件

<div class="navbar-collapse collapse sidebar-navbar-collapse">
   <ul class="nav navbar-nav" >
      <div  ng-repeat="(key, value) in items | groupBy: 'topic'" >
         <label> {{key}} </label>  
         <li> {{value.pageName}} </li>               
           <ul style="list-style-type: none">
              <div ng-repeat=" (key , val) in value | groupBy: 'category' ">  
                <label>{{key}}</label>
                <li>
                  {{val.description}}
                </li>           
                <ul style="list-style-type: none" >
                  <div ng-repeat="x in val"> 
                    <li>{{x.subCategory}} </li>
                  </div>
              </ul>
          </div>
        </ul> 
     </div>
    </ul>       
  </div>

在这里，我想按主题和类别进行分组。逻辑工作正常，但我无法打印page_Name和Description的值。请让我知道如何做到这一点。

Answer 1

我观察到的东西很少，

是page_Name或pageName。根据json，它是page_Name
多次ng-repeat，因为只有数据的迭代
HTML结构不好，你在UL里面使用div和UL而没有li

尝试以下（不确定因为我无法在小提琴中测试）

＆＃13;

<div class="navbar-collapse collapse sidebar-navbar-collapse">
   <ul class="nav navbar-nav">
      <div  ng-repeat="(key, value) in items | groupBy: 'topic'" >
         <label> {{key}} </label>  
         <li> {{value.page_Name}} </li>
         <li>
           <ul style="list-style-type: none" ng-if = "key == 'category'">              
                <label>{{key}}</label>
                <li>
                  {{value.description}}
                </li>
                 <li>
                    <ul style="list-style-type: none" ng-if = "key == 'subCategory'">
                      <label>{{key}}</label>
                      <li>{{value.subCategory}} </li>                  
                   </ul> 
               </li>
            </ul> 
        </li>
     </div>
   </ul>       
 </div>

＆＃13;

如何在angular-filter.js中使用嵌套的groupBy

1 个答案: