javascript - 如果使用 UI-Bootstrap 的 typeahead 指令未找到匹配项，则表单不可编辑？

Question

下面是如何设置我的预输入输入框的相关代码。本质上，用户输入名称，相关信息就会加载到表单的其余部分中。在找不到匹配项的情况下，我希望用户仍然能够在表单中输入姓名和相关信息。

如果未找到匹配项，则表单不可编辑。例如，如果我在姓名中输入“John Doe”，并且没有匹配项，则无法在“地址”输入框中输入，其代码如下所示。

提前输入:

<label for="participant-name">Name</label>
<input name="participant-name" typeahead="participant as participant.name for participant in participants | filter:$viewValue | limitTo: 8" type="text" class="form-control" ng-model="entry.participant">

示例输入框:

<label for="participant-street-no">Address</label>
<input name="participant-street-no" type="text" class="form-control" ng-model="entry.participant.street">

Answer 1

这是因为当您在 typeahead 中输入字符串时，entry.participant 现在是该字符串，而不是对象。您不能将 .street 添加到字符串中。相反，您需要创建一个新对象，获取entry.participant 字符串并将其作为.name 分配给该对象，然后将entry.participant 设置为该对象。

我会这样做:首先将 typeahead editable 设置为 false。在预输入输入框中添加一个按钮( Bootstrap 的输入组在这方面做得很好)，显示“New”并隐藏预输入并将其替换为另一个具有entry.participant.name模型的输入框。一旦他们点击“新建”，就设置entry.participant = {}。此时，您还可以将“新建”替换为“取消”或“X”。

编辑

这是一个plunker! 我保持预输入可编辑，这样您就可以看到选择 Bob 或 Jim 时的模型与仅输入字符串时的模型之间的差异。否则，在您从下拉列表中选择某些内容之前，不会设置模型。