如果使用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 edable设置为false。在typeahead输入框中添加一个按钮（bootstrap的输入组做得很好），显示“New”并隐藏typeahead并将其替换为另一个输入框，其中包含entry.participant.name模型。只要他们点击new，就设置entry.participant = {}。此时你也可以将“新”换成“取消”或“X”。

修改

这是一个plunker! 我保持了typeahead的可编辑性，这样当你选择Bob或Jim时，你可以看到模型的不同，而不是你输入一个字符串。否则，在您从下拉列表中选择某些内容之前，不会设置模型。