使用 multi-select 以及 ui-select 中显示的下拉三角形

Question

有什么方法可以让 ui-select 的 multiple 模式显示下拉三角形 (▼)？

<div ui-select multiple ng-model="selectedItems" class="form-control">
    <div ui-select-match>
        <span>{{$item.name}}</span>
    </div>

    <div ui-select-choices repeat="item in availableItems" >
        <span>{{item.name}}</span>
    </div>  
</div>

我成功地从普通ui-select偷了三角形：

<i class="caret pull-right" ng-click="$select.toggle($event)"></i>

但在右侧的普通位置无法正常显示。有小费吗？谢谢。

Answer 1

到目前为止我得到的解决方案：重用这个 caret class 并使用样式 position: relative; left: -1.5em; 使其显示在组件顶部，将元素放在 [=13= 之后]（将它直接放在 ui-select 内是不可能的，因为 angularjs 将其内容替换为自己的模板 - 所以我的 caret 出现在后面但随后向左移动）

此外，我必须将 ng-click 附加到此 caret 元素上，这 $select.toggle($event)。只要 $select 在 ui-select 的范围之外不可用，我就必须引入包含 ui-select 和 caret 元素的外部控制器 - 并简单地分配 $select 其中的一个字段在 ui-select.

上使用 ng-init

所以它看起来像：

<div ui-select multiple ng-model="selectedItems" class="form-control" ng-init="mySelect = $select">
    <div ui-select-match>
        <span>{{$item.name}}</span>
    </div>

    <div ui-select-choices repeat="item in availableItems" >
        <span>{{item.name}}</span>
    </div>  
</div>

<span style="position: relative; left: -1.5em;" class="caret" 
ng-click="mySelect.toggle($event)></span>

▼ 仅在未打开下拉菜单时显示。此外，单击它需要一些像素搜索（可以通过将 caret 放入垂直分布的 div 来缓解）。所以这是一个部分解决方案。

Answer 2

我想出的最佳方法是使用此应用的可缩放背景 SVG 图像 CSS:

.select2-search-field {
    width: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 13 6' fill='gray'><polygon points='0 1 8 1 4 5'></polygon></svg>");
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: right;
}

使用 multi-select 以及 ui-select 中显示的下拉三角形

Using multi-select along with dropdown triangle displayed in ui-select

angularjs

angular-ui-bootstrap

ui-select