Question

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

我不确定问题出在我使用的bootstrap或angular版本上，或者我的代码中出错了。

<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

Answer 1

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

如果您想从说明中设置$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)"/>

Answer 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的方法不适用于您时，才应将此方法视为备份计划。

使用uib-typeahead不会显示所选值

2 个答案: