在ui中输入-选择一个不在列表中的值答案

【问题标题】：Entering in ui-select a value that is not in the list在ui中输入-选择一个不在列表中的值
【发布时间】：2016-08-01 02:07:13
【问题描述】：

In this 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>

【问题讨论】：

标签： ui-select angular-ui-select

【解决方案1】：

您应该可以使用 ui-select 的tagging 功能来实现您想要的。请参阅this 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;
};

请注意，年龄和国家/地区已设置为“未知”，因为我们无法仅通过输入姓名来确定它们是什么。电子邮件也默认为“NAME@email.com”。

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

【讨论】：