Выпадающий заголовок Bootstrap с использованием ngRepeat

Question

Я хочу заполнить выпадающее меню BootStrap, используя ngRepeat. Я могу заполнить элементы просто отлично, но что, если я хочу иметь один заголовок на итерацию?

<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

Update я теперь понимаю, что я не понял ваш вопрос, но я бы все-таки взглянуть на библиотеку Угловая UI Boostrap, если вы не используете его уже.