ngStrap Dropdown template

Question

Я довольно новичок в угловой, и я использую угловой ремешок, чтобы настроить кнопку выпадающего списка, потому что мне хотелось, чтобы форматирование HTML появилось в результате выпадающего списка.

Мне удалось успешно присвоить шаблон раскрывающимся спискам, но теперь я хочу также создать стиль самой кнопки с другим шаблоном.

Потому что я хотел, чтобы это выглядело из этого:

Для этого:

Возможно ли это?

Это как мой HTML тег выглядит сейчас:

<button class="form-control custom-select" data-html="1" ng-model="myModel" bs-options="icon.value as icon.label for icon in icons" data-template-url="dropdown.tpl.js" bs-select></button> 

Answer 1

Что вы просите требует только некоторые CSS. Когда ваш HTML компилируются, то Ouput (что отображается в браузере) является:

<button class="form-control custom-select" 
     data-html="1 
     ng-model="myModel" 
     bs-options="icon.value as icon.label for icon in icons" 
     data-template-url="dropdown.tpl.js" 
     bs-select> 
    <!-- placeholder --> 
    <span class="caret"></span> 
</button> 

Вы должны настроить выравнивание текста вашей кнопки, а также форма и положение каретки (который является классом начальной загрузки что создает стрелку).

Вы можете найти советы here.

EDIT:

Чтобы использовать HTML, вы можете передать аргумент caretHtml для директивы bsSelect:

<button class="form-control custom-select" 
     data-html="1 
     ng-model="myModel" 
     bs-options="icon.value as icon.label for icon in icons" 
     data-template-url="dropdown.tpl.js" 
     data-caret-html="<span class='myClass'></span>" 
     bs-select> 
    <!-- placeholder --> 
    <span class="caret"></span> 
</button> 

Это решение не является в док угловой планке, но caretHtml аргумент существует в исходный код. Будьте осторожны, он может быть удален в будущих обновлениях.