Angularjs と Bootstrap 2.3.2 を使用して、サブメニューを含むメニュー システムを作成しています。これは、幅の狭いデバイスでレスポンシブ デザインを使用していて、折りたたまれたバージョンのメニュー システムに問題が発生するまではうまく機能します。具体的には、メニュー項目の 1 つを選択した後、メニューが折りたたまれません。興味深いことに、メイン メニューが折りたたまれていなくても、サブ メニューは折りたたまれます。アイコンバーをクリックするとメニューを折りたたむことができますが、メニュー項目自体はこれを行いません。
$resource を介してメニュー (ユーザー固有) を取得し、次のテンプレートによって作成されます。
<div class="navbar navbar-inverse navbar-fixed-top hidden-print">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="brand" href="#">BRAND HERE</a>
<div ng-controller="MenuController" class="nav-collapse collapse">
<div ng-repeat="menu in menus">
<ul class="nav" role="navigation">
<li ng-show="menu.submenus" class="dropdown" class="active">
<a class="dropdown-toggle" href="{{menu.route}}">{{menu.title}}<i class="icon-caret-down"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
<li ng-repeat="submenu in menu.submenus"><a href="{{submenu.route}}">{{submenu.title}}</a></li>
</ul>
</li>
<li ng-hide="menu.submenus"><a href="{{menu.route}}">{{menu.title}}</a></li>
</ul>
</div>
</div>
<!--/.nav-collapse -->
</div>
<!--/ container -->
</div>
</div>
<!--/ navbar -->
メニュー オブジェクトは次のようになります。
[
{
"title": "Setup",
"route": "#",
"submenus": [
{
"title": "one",
"route": "#/one",
"submenus": null
},
{
"title": "two",
"route": "#/two",
"submenus": null
} ]
},
{
"title": "special",
"route": "#/special",
"submenus": null
},
{
"title": "boring",
"route": "#/boring",
"submenus": null
}
]