Question

我只是想知道是否可以使用Twitter Bootstrap在Angular.js中创建交互式菜单。我只想在app控制器中将每个组件表示为数组元素，但不能重复代码。

<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。

的问题：

您应该将ng-repeat="menu in menus"放在li元素中，以便生成li而不是ul。
ng-repeat有自己的范围，因此您需要在$parent内的cls前面使用ng-repeat。阅读understanding scopes。
使用angular-directives时，您不需要使用{{...}}语法，您可以使用实际值。在您的情况下menu而不是{{menu}}。

Answer 2

您想生成<li>'s，因此请将ng-repeat="menu in menus"放入li元素中使用parent代替ng-repeat。希望它有所帮助

Angular.js中的交互式菜单与Twitter Bootstrap

2 个答案: