帶有Twitter Bootstrap的Angular.js中的交互式菜單

Question

我只是想知道我是否可以使用Twitter Bootstrap在Angular.js中創建交互式菜單。 我只想將每個組件表示為應用程序控制器中數組的元素，但不使用重復代碼。

<input type="text" ng-model="cls" ng-init="cls='Blog';" style="display: none;">

<ul class="nav nav-pills nav-stacked" ng-repeat="menu in menus">
     <li role="presentation" ng-class="cls=='{{menu}}'? 'active': ''">
          <a href="#" ng-click="cls='{{menu}}';">{{ menu }}</a>
     </li>

<ul class="nav nav-pills nav-stacked">
     <li role="presentation" ng-class="cls=='Blog'? 'active': ''"><a href="#" ng-click="cls='Blog';">Blog</a></li>
     <li role="presentation" ng-class="cls=='Info'? 'active': ''"><a href="#" ng-click="cls='Info';">Info</a></li>
     <li role="presentation" ng-class="cls=='Contacts'? 'active': ''"><a href="#" ng-click="cls='Contacts';">Contacts</a></li>
</ul>

查看JSFiddle 。

Answer 1

解決方法如下： JSFiddle 。

問題：

• 您應將li元素內的ng-repeat="menu in menus"放入li元素，以生成li而不是ul。
• ng-repeat具有自己的范圍，因此您需要在ng-repeat內的cls前面使用$parent 。 閱讀理解范圍 。
• 在使用角度方向指令時，不需要使用{{...}}語法，可以使用實數值。 在您的情況下，使用menu代替{{menu}} 。

Answer 2

您要生成<li>'s ，因此請在li元素中放入ng-repeat="menu in menus" 。
使用parent而不是ng-repeat 。 希望對您有所幫助