带有 ui-select 的角度组合框

Question

我正在寻找一种创建组合框的方法（文本输入和下拉选择合二为一）。文本框应该链接到模型值，就好像它是一个普通的文本输入一样，但同时应该可以从下拉列表中选择一个将被设置为文本的值。

我尝试了 angular-ui-select (https://github.com/angular-ui/ui-select) 但无法获得所需的功能。它要么只是文本字段，要么只允许从下拉列表中选择。我的用户应该能够输入自定义文本或从下拉列表中选择。

我已经尝试使用下面的代码，这当然不起作用，因为我的模型 element.customType 仅在选择下拉列表中的值后才设置。有人知道如何使用 ui-select 或其他指令来实现这一点吗？

<ui-select ng-model="element.customType" theme="bootstrap" ng-disabled="disabled" style="min-width: 300px;">
  <ui-select-match placeholder="Enter customType...">{{$select.selected}}</ui-select-match>
  <ui-select-choices repeat="type in CUSTOM_TYPES">
     <div ng-bind-html="trustAsHtml(type)"></div>
  </ui-select-choices>
</ui-select>

感谢任何帮助。

Answer 1

几个月前我也遇到过类似的问题。

Jimmy，请查看以下文档http://ivaynberg.github.io/select2/ 和 https://github.com/angular-ui/ui-select2

为什么不使用provenselect标签？

为了结合 select2 库和 Angular js，您必须包含 css 和 js 库，如这里https://github.com/angular-ui/ui-select2#usage

请注意，您必须包含 2 个不同的 SELECT2 库：PLAIN select2 库和 ANGULAR-UI-SELECT2 中的 select2 库

如果你有正确的配置、控制器和服务来获取你的数据，那么 HTML 部分非常简单，例如：

<select ui-select2 ng-model="selectedSingle" data-placeholder="-- Select One --">
    <option></option>
    <option ng-repeat="item in items" value="{{item.id}}">{{item.name}}</option>
 </select>

更多详情请关注https://github.com/angular-ui/ui-select2#working-with-dynamic-options

我也使用了相同的参考，希望你能很快解决:)