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

Question

是否有任何方法可以为multiple的ui-select模式显示下拉三角形（▼）？

<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之后但后来左转）

此外，我不得不附加ng-click，它$select.toggle($event)做这个caret元素。只要$select不在ui-select的范围之外，我必须引入包括ui-select和caret元素的外部控制器 - 并且简单地使用$select上的ng-init将ui-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;
}