带有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 。 希望对您有所帮助