javascript - 在 angularjs 中创建一个可编辑的下拉菜单

Question

我如何创建一个可编辑的下拉菜单，用户可以在其中添加一个新选项并填充它。

您可以在下面找到我的 html 下拉代码:

<select class="fieldDropdown" ng-model="currentFileGroup" title=""
 ng-options="value.ls_ItemValue as value.ls_ItemText for (key, value) in formLIST.filesGroup" 
data-style=""></select>

我希望当用户填写选项时，它会自动添加到数据库中。 使用 JavaScript、AngularJS 或 jQuery 都没有问题。

Answer 1

我通常使用 ui-select 进行此类交互: https://github.com/angular-ui/ui-select

在这种情况下，“标记”功能可能最接近您想要的功能: http://plnkr.co/edit/m1SQXUxftBLQtitng1f0?p=preview

<ui-select tagging="tagTransform" ng-model="person.selected" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person">
   <ui-select-match placeholder="Select person...">{{$select.selected.name}} &lt;{{$select.selected.email}}&gt;</ui-select-match>
   <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
      <div ng-if="person.isTag" ng-bind-html="person.name +' <small>(new)</small>'| highlight: $select.search"></div>
      <div ng-if="!person.isTag" ng-bind-html="person.name + person.isTag| highlight: $select.search"></div>
    <small>
     email: {{person.email}}
     age: <span ng-bind-html="''+person.age | highlight: $select.search"> </span>
    </small>
  </ui-select-choices>
</ui-select>
<p>Selected: {{person.selected}}</p>