Angular js使用json創建動態菜單

我是新來的angular js。我需要使用angular js創建一個動態菜單和超鏈接。我有菜單名稱和超鏈接來自json，我需要顯示。目前我已經嘗試過使用靜態菜單。Angular js使用json創建動態菜單

我的菜單結構是這樣

Home 

Services 

     -ser1 
     -ser2 
     -ser3 

About 

    -abt1 

Contact

所有菜單值和超鏈接來自JSON文件。

這是我的JSON

[ 
    { 
     "id": 100, 
     "product": 0, 
     "childs": [ 
      { 
       "id": 200, 
       "description": { 
        "id": 0, 
        "name": "Home", 
        "url": "home" 
       } 
      } 
     ] 
    }, 
    { 
     "id": 100, 
     "description": { 
      "id": 0, 
      "name": "services", 
      "url": "services" 
     }, 
     "parent": null, 
     "childs": [ 
      { 
       "id": 200, 
       "description": { 
        "id": 0, 
        "name": "Ser1", 
        "url": "Ser1" 
       }, 
       "productCount": 0, 
       "childs": [ 
        { 
         "id": 250, 
         "description": { 
          "id": 0, 
          "name": "ser2", 
          "url": "Ser2" 
         }, 
         "childs": [] 
        }, 
        { 
         "id": 251, 
         "description": { 
          "id": 0, 
          "name": "ser3", 
          "url": "ser3" 
         }, 
         "productCount": 0, 
         "childs": [] 
        } 
       ] 
      } 
     ] 
    }, 
    { 
     "id": 201, 
     "description": { 
      "id": 0, 
      "name": "About", 
      "url": "about" 
     }, 
     "productCount": 0, 
     "childs": [ 
      { 
       "id": 203, 
       "description": { 
        "id": 0, 
        "name": "abt1", 
        "url": "underground" 
       }, 
       "productCount": 0, 
       "childs": [] 
      } 
     ] 
    }, 
    { 
     "id": 202, 
     "description": { 
      "id": 0, 
      "name": "Contact", 
      "url": "con" 
     }, 
     "productCount": 0, 
     "childs": [] 
    } 
]

這是我的HTML

<li class="prod-dropdown" ng-repeat="menu in menus" ng-class="{proddropdown: menu.menus}"> 
        <a ng-href="#/{{menu.action}}" ng-class="{'dropdown-toggle': menu.menus}" 
         data-toggle="dropdown">{{menu.menus.desc['name']}} </a> 
        <ul ng-if="menu.menus" class="dropdown-menu"> 
         <li ng-repeat="submenu in menu.menus"> 
          <a ng-href="#/{{submenu.action}}">{{submenu.desc}}</a> 
         </li> 
        </ul> 
       </li>

來源

2015-06-20 user2959949

什麼你想要做什麼？你甚至沒有在json和html中定義的單個匹配屬性 – nikhil

這些值將來自php後端，他們正在動態創建json。這是針對電子商務網站 – user2959949

我不是在談論值，而是屬性。例如，在json中，我找不到任何動作 – nikhil

2級子菜單

<li class="prod-dropdown" ng-repeat="menu in menus"> 
      <a ng-href="#/{{menu.description['url']}}" ng-class="{'dropdown-toggle': menu.menus}" class="dropdown-toggle" data-toggle="dropdown"> 
       {{menu.description['name'] | uppercase}} <span ng-if="menu.childs" class="caret"></span> 
      </a> 
      <ul ng-if="menu.childs" class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
       <li class="dropdown-submenu" ng-repeat="submenu in menu.childs"> 
        <a tabindex="-1" ng-href="#/products/{{submenu.description['url']}}">{{submenu 
         .description['name']}}</a> 
        <ul class="dropdown-menu" ng-if="submenu.childs"> 
         <li class="dropdown-submenu" ng-repeat="subofsub in submenu.childs"> 
          <a ng-href="#/products/{{subofsub.description['url']}}">{{subofsub.description['name']}}</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
    </li>

來源

2015-06-29 07:16:38 user2959949

您應該使用NG-包括屬性 - http://benfoster.io/blog/angularjs-recursive-templates

來源

2015-06-20 22:38:15

這裏是「動態多級菜單」

HTML的一個例子

<ul class="sidebar-menu" ng-repeat="m in modulos"> 
     <li class="treeview" ng-repeat="(itemIndex, item) in modulos"> 
     <a ng-click="showSubmenu(itemIndex)"> 
      <i class="fa fa-table"></i> <span>{{item.module}}</span> 
     </a> 

     <ul class="sub-nav" ng-show="isShowing(itemIndex)"> 
      <li ng-repeat="sub_element in m.submodule"> 
      <a href="{{sub_element.url}}">{{sub_element.res}}</a> 
      </li> 
     </ul> 
     </li> 
    </ul>

的Javascript

$scope.showSubmenu = function(item) { 
     if ($scope.activeParentIndex === item) { 
      $scope.activeParentIndex = ""; 
     } else { 
      $scope.activeParentIndex = item; 
     } 
     } 

     $scope.isShowing = function(index) { 
     if ($scope.activeParentIndex === index) { 
      return true; 
     } else { 
      return false; 
     } 
     }; 

     $scope.modulos = [{ 
     "module": "Admin System ", 
     "adm_modulo_id": 1, 
     "submodule": [{ 
      "res": "Angular", 
      "url": "#/admin/1" 
     }, { 
      "res": "Linux", 
      "url": "#/admin/2" 
     }, { 
      "res": "Server", 
      "url": "#/admin/3" 
     }] 

     }];

，其結果是在這裏一Plunk

來源

2016-02-15 15:39:47

Angular js使用json創建動態菜單

回答

相關問題