angular-ui-select中的多行(换行)选择选项

Question

是否可以在angular-ui-select中进行多行选择？我知道在传统的select输入中不能做到这一点，但在这里它必须是可能的。如果你是CSS专家，那么这个插入器在这里：http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

<ui-select ng-model="address.selected"
             theme="bootstrap"
             ng-disabled="disabled"
             reset-search-input="false"
             style="width: 300px;">
 <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
 <ui-select-choices repeat="address in addresses track by $index"
             refresh="refreshAddresses($select.search)"
             refresh-delay="0">
      <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
 </ui-select-choices>
</ui-select>

Answer 1

这是由于CSS属性空白，该属性在默认ui-select样式表中设置为nowrap。

您可以通过将以下内容添加到自定义css来更改此行为：

.ui-select-bootstrap .ui-select-choices-row > a{
    white-space: normal;
}

这将改变页面上所有ui-select的行为。如果你只想修改一个，你可以把它包装在一个div中：

  <div class="multiline-select">
    <ui-select (...)>
      (...)
    </ui-select>
  </div>

并更改css选择器

div.multiline-select .ui-select-bootstrap .ui-select-choices-row > a{
    white-space: normal;
}

我已经派生了你的柱塞来显示结果http://plnkr.co/edit/IplCxLbnPoIW4TJx1HIx?p=preview

Answer 2

对于较新版本的ui-select (我使用的是0.19.3)，看起来a元素已经被span所取代。

此外，为了使单词环绕和边框在引导主题中的ui-select-match周围正确工作，来自.form-control的高度阻止边框绕过新行，因此应该制定第二条规则：

div.multiline-select .ui-select-bootstrap .ui-select-choices-row > span {
    white-space: normal;
}

div.multiline-select .ui-select-bootstrap .ui-select-match > span.btn {
  white-space: normal;
  height: auto;
}

从Vincent's派生而来并更新到0.19.3的Working plunkr：http://plnkr.co/edit/XKAJ1gVj4uAukk7IaBd2?p=preview

Answer 3

从这个角度来看，它似乎不适用于引导风格(这是最初的问题吗？)似乎使用bootstrap时，它适用于下拉列表，但不适用于结果框(它会溢出)。

这个分叉柱塞演示了：

http://plnkr.co/edit/fMMSKuPMZwjgVCfV4n6d?p=preview

注意:我对此进行了更改：

<ui-select ng-model="country.selected" theme="bootstrap" ng-disabled="disabled" style="width: 200px;">