所选值未使用 uib-typeahead 显示

Question

我在我的 angularjs 应用程序中使用 uib-typeahead，以便在文本框中自动提示。当我输入一些字母时，我可以看到建议。但是，如果我 select 任何 selection，那将不会显示在文本（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)"/>

下面是我的代码link。

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

Answer 1

你的问题是，当你 select 一个选项时，整个对象被分配给输入的 $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)"/>

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 显示

Selected value is not getting displayed with uib-typeahead

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap