Question

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>

Answer 1

您应该能够使用ui-select的tagging功能来实现您的目标。请参阅this Plunkr获取演示 - 如果您在框中键入“Gary”然后标签，则会填充“Gary”。

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

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

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

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（用于标记在单选模式下工作）。遗憾的是，这意味着您无法在键入时指定下拉列表中显示的标记标签功能（但这确实可以在多种选择模式下工作）。

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

1 个答案: