I want to customize the typeahead dropdown to show "name" and "original". The json source is in the form
[
...
{
"_id": "56d0524c07e5a2940eb059c6",
"name": "english name",
"original": "original name",
"__v": 0
},
...
]
As I saw in docs, I tried this custom template:
<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)">
It doesn't work. The current result I get is on selection I see a single string in model, not the whole object selected. What's the proper way to:
use a custom template with 2 (or 3) values
define which one have to be shown in input field
It looks I solved by myself, actually the example "Custom templates for results" is pretty much what I was looking for. The solution is filter the source like that
uib-typeahead="item as item.name for item in search($viewValue) | filter:{name:$viewValue}"