Question

我想使用ngRepeat填充BootStrap下拉列表。我可以很好地填充项目但是如果我想每次迭代有一个标题怎么办？

    <ul class="dropdown-menu">
  <li class="dropdown-header">Dropdown header 1</li>
  <li ng-repeat="order in orders"><a href="#">{{order.name}}</a></li>
   </ul>

有了这个，我只能理解一个标题。

Answer 1

使用ngRepeatStart和ngRepeatEnd

<li ng-repeat-start="order in orders" class="dropdown-header">Dropdown header {{$index}}</li>
<li ng-repeat-end="order in orders"><a href="#">{{order.name}}</a></li>

Answer 2

您可以使用ng-repeat-start和ng-repeat-end。

<ul class="dropdown-menu">
  <li ng-repeat-start="order in orders" class="dropdown-header">Dropdown header {{$index}}</li>
  <li ng-repeat-end><a href="#">{{order.name}}</a></li>
</ul>

您也不必写：ng-repeat-end='order in orders'。你可以提到ng-repeat-end

在此处详细了解：ng-repeat start and end

Answer 3

你没有指定，但我假设你正在使用随之而来的jQuery库。我强烈建议使用Angular UI Bootstrap。他们已经为你照顾好了。我确定你还想使用其他组件。

https://angular-ui.github.io/bootstrap/#/dropdown

更新我现在意识到我误解了你的问题，但是如果你还没有使用它，我仍然会看一下Angular UI Boostrap库。

使用ngRepeat的Bootstrap下拉标头

3 个答案: