實施引導菜單中角JS 1.5

我想實現引導家長 - 使用AngularJS 1.5兒童菜單，我不能夠實現CARRET &子菜單。所以任何人都可以幫我解決這個問題。

數組模式如下：ID列隨機生成的數字，ParentCategoryID = 0意味着它的父菜單&如果值大於0，則表示ParentCategoryID是Parent「ID」的子級。

ID : 1, LinkText: "Activity", URL: "/CRM/Activity/", ParentCategoryID: 0 
ID : 2, LinkText : "Business Partners", URL : "/CRM/BusinessPartner/", ParentCategoryID : 0 
ID : 3, LinkText : "Sales", URL : "#", ParentCategoryID : 0 
ID : 4, LinkText : "Sales Opportunities", URL : "/CRM/OpportunityMaster/", ParentCategoryID : 3 
ID : 5, LinkText: "Sales Quotation", URL: "/CRM/SalesQuotation/", ParentCategoryID: 3 
ID : 6, LinkText : "Sales Order", URL : "/CRM/SalesOrder/", ParentCategoryID : 3 
ID : 7, LinkText : "Delivery", URL : "/CRM/Delivery/", ParentCategoryID : 0 
ID : 8, LinkText : "Service Call", URL : "/CRM/ServiceCall/", ParentCategoryID : 0 
ID: 9, LinkText: "Customer Equipment Card", URL: "/CRM/EquipmentCard/", ParentCategoryID: 0

引導3.5.5菜單

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 
     <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav>

由於從數據庫菜單中的實際HTML，我不能夠實現它的子菜單，請在建議我的解決方案這個。 Plunker

來源

2017-04-12 Rahul Jain

發佈您的代碼，這樣我們就可以知道你有多遠做，在什麼時候，你所面對的問題。 –

@AKA請找Plunker鏈接... –

哪裏，你想在子菜單項顯示什麼？ – tanmay

你可以試試這個修改後的代碼

<!DOCTYPE html> 
<html > 

    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="1.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <link data-require="[email protected]" data-semver="1.5.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" /> 
    <script data-require="[email protected]" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.4/ui-bootstrap-tpls.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script> 
    <script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 

    <script type="text/javascript"> 

    </script> 
    </head> 

    <body ng-app="ACE" ng-controller="LayoutController"> 
    <nav class="navbar navbar-inverse"> 
      <div class="container-fluid"> 
       <div class="navbar-header"></div> 
       <!--ng-if="(MenuList | filter:{ParentCategoryID : menu.ID}).length >= 0"--> 
       <script type="text/ng-template" id="treeMenu"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" href="{{menu.URL}}">{{menu.LinkText}} 
        <span ng-if="(MenuList | filter:{ParentCategoryID : menu.ID}).length > 0"> 
        <span class="caret"></span> 
        <ul class="dropdown-menu"> 
         <li ng-repeat="menu in MenuList | filter: {ParentCategoryID : menu.ID}"> 
          <a href="#">{{menu.LinkText}}</a> 
         </li> 
         </ul> 
        </span> 
        </a> 
       </script> 

       <ul class="nav navbar-nav"> 
        <li class="dropdown" ng-repeat="menu in MenuList | filter: {ParentCategoryID : 0}" ng-include="'treeMenu'"> 
        </li> 
        <li id="btnLogOut"><a href="#">Log out</a></li> 
       </ul> 
      </div> 
     </nav> 
    </body> 

</html>

來源

2017-04-12 11:49:58 user7761868

user7761868感謝您的回覆，但現在不適用於父菜單...此屬性給出的問題=>數據切換=「下拉」，但如果我刪除此屬性，則子菜單不起作用。 –

嗨拉胡爾，感謝您的反饋。正如你所說的這個問題是由於數據切換屬性。實現該功能的方法是有條件地添加數據切換屬性。我們可以用ng-attr屬性來實現這一點。這是片段。 '<類= 「下拉肘節的」 href = 「{{menu.URL}}」 NG-ATTR數據肘節=「{{menu.URL == '＃' '下拉'： ''} }「> {{menu.LinkText}}' – user7761868

需要你的幫助......我們可以聊聊嗎？ –

實施引導菜單中角JS 1.5

回答

相關問題