angularjs - Angular-ui typeahead 自定义模板

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

我想自定义预输入下拉列表以显示“名称”和“原始”。 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 个)值的自定义模板

  • 定义必须在输入字段中显示的内容

  • 将整个对象保留为模型

最佳答案

阿尔弗雷多帕西诺

使用 match.model :)

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

参见第 43 行

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

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

关于angularjs - Angular-ui typeahead 自定义模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35942304/

相关文章:

javascript - Angular 数据绑定(bind)不起作用

angular - 如何在点击输入时打开 ngbDatepicker

javascript - Angular 引导提前输入关闭选择

angularjs - Angular UI Bootstrap typeahead-append-to

angularjs - 类型错误 : Cannot call method 'replace' of undefined

angularjs - 使用自定义HTML换行指令(另一个指令)

javascript - Angular JS - 根据其包含的数字进行过滤

angularjs - 具有深度嵌套路由的 Angular2 路由 v3.0.0

popover - 带有关闭按钮的 Angular UI Bootstrap 弹出窗口

Angularjs - 错误 : [$injector:unpr]