ngStrap 下拉模板

Question

我是 angular 的新手，我正在使用 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>

您必须自定义按钮的文本对齐方式以及插入符号的形状和位置（这是一个创建箭头的 bootstrap class）。

你可以找到一些建议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 参数。请注意，它可能会在以后的更新中被删除。

ngStrap 下拉模板

ngStrap Dropdown template

angularjs

angular-strap