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

gan*_*rty 5 css angularjs angular-ui

是否可以在angular-ui-select线程中进行选择?我知道你不能在传统的选择输入中做到这一点,但在这里它必须是可能的.如果你是CSS大师,那里的plunker: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>
Run Code Online (Sandbox Code Playgroud)

Vin*_* V. 12

这是由于CSS属性空白,它被设置为默认的ui-select样式表中的nowrap.

您可以通过将此行为添加到自定义css来更改此行为:

.ui-select-bootstrap .ui-select-choices-row > a{
    white-space: normal;
}
Run Code Online (Sandbox Code Playgroud)

这将改变页面上所有ui-select的行为.如果你想改变一个,你可以将它包装在div中:

  <div class="multiline-select">
    <ui-select (...)>
      (...)
    </ui-select>
  </div>
Run Code Online (Sandbox Code Playgroud)

并更改您的CSS选择器

div.multiline-select .ui-select-bootstrap .ui-select-choices-row > a{
    white-space: normal;
}
Run Code Online (Sandbox Code Playgroud)

我已将你的plunkr分叉以显示结果 http://plnkr.co/edit/IplCxLbnPoIW4TJx1HIx?p=preview