angular-ui typeahead自定义模板

时间:2016-03-11 14:07:09

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

我想自定义typeahead下拉列表以显示“name”和“original”。 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)个值的自定义模板

  • 定义哪一个必须在输入字段中显示

  • 将整个对象保留为模型

2 个答案:

答案 0 :(得分:0)

alfredopacino,

使用match.model:)

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

中的第43行
Logger

                

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

答案 1 :(得分:0)

看起来我一个人解决了,实际上示例“自定义结果模板”几乎就是我想要的。解决方案是像这样过滤源

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