angular-ui typeahead 自定义模板答案

【问题标题】：angular-ui typeahead custom templateangular-ui typeahead 自定义模板
【发布时间】：2026-01-21 12:35:01
【问题描述】：

我想自定义预输入下拉菜单以显示“名称”和“原始”。 json源格式为

[
...
   {
    "_id": "56d0524c07e5a2940eb059c6",
    "name": "english name",
    "original": "original name",
    "__v": 0
   },
...
]

正如我在文档中看到的，我尝试了这个自定义模板：

<script type="text/ng-template" id="custom.html">
<a>
    <span ng-bind-html="match.label.name | uibTypeaheadHighlight:query"></span>
    <small ng-bind-html="match.label.original | uibTypeaheadHighlight:query"></small>
</a>

<input type="text" ng-model="$parent.model.referringCourt" typeahead-template-url="custom.html" uib-typeahead="item.name as item for item in search($viewValue)">

它不起作用。我得到的当前结果是选择我在模型中看到一个字符串，而不是选择的整个对象。正确的方法是：

使用具有 2 个（或 3 个）值的自定义模板
定义哪个必须显示在输入字段中
将整个对象保留为模型

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-ui-typeahead

【解决方案1】：

阿尔弗雷多帕西诺，

使用 match.model :)

match.label 只是模型项的显示值。

见第 43 行

<script type="text/ng-template" id="customTemplate.html">

https://plnkr.co/edit/?p=preview

【讨论】：

【解决方案2】：

看起来我自己解决了，实际上“自定义结果模板”示例正是我所寻找的。解决方案是像这样过滤源

 uib-typeahead="item as item.name for item in search($viewValue) | filter:{name:$viewValue}"

【讨论】：