uib-typeahead 未显示所选值答案

【问题标题】：Selected value is not getting displayed with uib-typeaheaduib-typeahead 未显示所选值
【发布时间】：2017-08-18 09:11:52
【问题描述】：

我在我的 angularjs 应用程序中使用如下 uib-typeahead 在文本框中自动建议。当我输入一些字母时，我可以看到建议。但是，如果我选择任何选择，则不会显示在文本（ng-model）中。

我不确定问题出在我正在使用的引导程序或角度版本上，还是我在代码中做错了什么。

<input type="text" ng-model="selectedData" uib-typeahead="proDesc as mydata.proDescription for mydata in dataList | filter:$viewValue | orderBy:orderByStartsWith($viewValue)"/>

下面是我的代码链接。

http://plnkr.co/edit/s4ol9bkrcb16QV2pAikA?p=preview

【问题讨论】：

我在你的 plunker 中看到一个错误是 Bootstrap 的 JavaScript 需要 jQuery
添加 jQuery 并重试

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

您的问题是，当您选择一个选项时，整个对象被分配给输入的$viewValue，而不是对象的描述属性。

如果你想从描述中设置$viewValue：

<input type="text" ng-model="selectedData" uib-typeahead="proDesc as mydata.proDescription for mydata in dataList | filter:$viewValue | orderBy:orderByStartsWith($viewValue)"/>

收件人：

<input type="text" ng-model="selectedData" uib-typeahead="mydata.proDescription as mydata.proDescription for mydata in dataList | filter:$viewValue | orderBy:orderByStartsWith($viewValue)"/>

【讨论】：

【解决方案2】：

cnorthfield 的解决方案应该有效。但是，在我自己的项目中，由于某些未知原因，它不起作用。我最终得到了另一个解决方案：

<input type="text"
ng-model="selectedData"
typeahead-input-formatter="$model.proDescription "
    uib-typeahead="mydata as mydata.proDescription for mydata in dataList | filter:$viewValue" />

但请注意，在这种情况下，selectedData 将在用户从列表中选择一项后成为数组中的一个对象，并在用户仅在输入框中键入时变成一个字符串。因此，您可能需要使用额外的事件侦听器（例如 ng-blur）来捕获它，并在侦听器中使用 if 块检查模型，例如：

if (typeof selectedData === 'string') {
    for (var i in dataList) {
        if (dataList[i].proDescription === selectedData) {
            // do some things here
        }
    }
}

仅当 cnorthfield 不适合您时，才应将这种方法视为备用计划。

【讨论】：