在ui中输入，选择一个不在列表中的值

Question

在这个plunk中，我有一个ui select，其中有一个包含名称的列表。我需要允许用户输入列表中的名称或列表中没有的名称。

如果我试图输入一个不在列表中的名称，ui select会自动将该值与列表中最近的值重新命名。

有没有办法找到不在列表中的值？

HTML

      <ui-select ng-model="ctrl.person.selected" theme="bootstrap">
        <ui-select-match>{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
          <div ng-bind-html="item.name | highlight: $select.search"></div>
          <small ng-bind-html="item.email | highlight: $select.search"></small>
        </ui-select-choices>
      </ui-select>

Answer 1

您应该能够使用ui select的标记功能来实现您想要的功能。请看这个Plunkr的演示-如果你在框中键入"Gary"，然后点击，它将填充"Gary"。

要使用标记功能，您需要指定属性tagging和tagging-label，如下所示：

<ui-select ng-model="ctrl.person.selected" tagging="ctrl.tagTransform" tagging-label="false">

因为你的模型是一个对象数组（而不是字符串），所以你需要指定一个函数，将"新"项目添加到模型中：

vm.tagTransform = function(newTag) {
  var item = {
    name: newTag,
    email: newTag+'@email.com',
    age: 'unknown',
    country: 'unknown'
  };
  return item;
};

请注意，年龄和国家/地区已设置为"未知"，因为我们无法通过键入姓名来确定它们是什么。电子邮件也默认为"[e-mail]".

ui-select也有一个错误，其中tagging-label需要设置为false（以便标记在单选模式下工作）。不幸的是，这意味着当您键入时，您无法指定标记标签功能显示在下拉列表中（不过这在多选模式下确实有效）。