将 ng-repeat 与引导导航栏元素一起使用

Question

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

<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 元素，而不是ng-controller 所在的div：

<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 可以让您了解代码有什么问题。