Раскрывающийся шаблон ngStrap

Question

Я довольно новичок в angular, и я использую угловой ремешок для настройки выпадающего меню, потому что я хотел немного 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 скомпилирован, вывод (что отображается в браузере):

<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>

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

Вы можете найти несколько советов здесь.

РЕДАКТИРОВАТЬ:

Чтобы использовать ваш 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>

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