Question

对于multiple的{{1}}模式，是否可以保持下拉三角形（▼）显示？

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

，但是很难在右侧的普通位置正确显示它。有小费吗？谢谢。

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元素的外部控制器-并简单地分配{{1 }}，使用$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>放入垂直分布的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;
}

将多重选择与ui-select中显示的下拉三角形一起使用

2 个答案: