Question

我正在尝试使用bootstrap制作导航栏。以下是代码。

<div>
   <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation" class="active"><a href="#">Option 1</a></li>
      <li role="presentation" class="active"><a href="#">Option 2</a></li>
   </ul>
</div>

我想使用ng-repeat作为选项。我尝试了以下代码：

<div ng-controller="MainController" ng-repeat="option in navBarOptions">
   <ul class="nav nav-tabs">
      <li class="active" role="presentation"><a href="#">{{ option.optionText }} </a></li>
   </ul>
</div>

这是JS部分。

var app = angular.module("myApp",[]);

app.controller('MainController',['$scope', function($cope) {
$cope.navBarOptions = [
   {
      optionText: 'Home',
   },
   {
      optionText: 'Option 1',
   },
   {
      optionText: 'Option 2',
   },
];
}]);

感谢。我对这个领域还不熟悉。让我知道，如果我错过了一些非常微不足道的东西。

Answer 1

您需要重复 li元素，而不是div所在的ng-controller：

<div ng-controller="MainController">
    <ul class="nav nav-tabs">
        <li role="presentation" ng-repeat="option in navBarOptions">
            <a href="#">{{option.optionText}}</a>
        </li>
    </ul>
</div>

注意：查看生成的DOM会让你知道你的代码有什么问题。

使用ng-repeat和bootstrap navbar元素

1 个答案: