Question

是否可以在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>

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

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

Answer 2

对于/************************************ Global ************************************/ html, body { height: 100%; width: 100%; } .row { max-width: none; } /************************************ LANDING PAGE ************************************/ /* Background */ .landing-bg { height: 100%; width: 100%; padding: 0; background: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/KADOHF81P4.jpg"); -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 0 70%; background-repeat: no-repeat; } /* Info */ .name, .role { width: 100%; position: absolute; text-transform: uppercase; text-align: center; } .name { top: 45%; color: #fff; letter-spacing: 0.7rem; } .role { top: 53%; color: #3687be; font-weight: 400; font-family: monospace; }的更新版本（我使用0.19.3），ui-select元素似乎已替换为a。

为了让自动换行和边框在引导主题中span周围正常工作，ui-select-match的高度会阻止边框绕过新行，因此应该制作第二条规则：

.form-control

工作的plunkr从Vincent分发并更新为0.19.3：http://plnkr.co/edit/XKAJ1gVj4uAukk7IaBd2?p=preview

Answer 3

在看这个时，它似乎不适用于引导样式（这是原始问题？）似乎使用bootstrap它适用于下拉列表，但不适用于生成的框（它溢出的地方）。

这个分叉的plunkr演示了：

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

注意：我改变了这个：

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

多线（自动换行）选择angular-ui-select中的选项

3 个答案: