使用多序列以及在UI序列中显示的下拉三角形

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类重复使用，并使用样式position: relative; left: -1.5em;将其显示在组件的顶部，将元素立即放置在ui-select之后（将其直接放置在ui-select中是不可能的因为Angularjs用自己的模板代替其内容 - 所以我的caret随后又移动了）

）

另外，我必须将$select.toggle($event)的ng-click附加到此caret元素上。只要$select不可用ui-select的范围提供，我就必须介绍包括ui-select和caret元素的外部控制器 - 只需使用ui-select上的ng-init分配其中的$select字段。

所以看起来像：

<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

我解决的最佳方法是使用此CSS应用的可扩展背景SVG图像：

.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;
}