ngStrap下拉模板

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时，输出（浏览器上显示的内容）为：

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

修改

要使用HTML，您可以为bsSelect指令传递caretHtml参数：

<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参数。请注意，以后的更新可能会被删除。