CODEWITHSUNDEEP
angularjs
r3plica
r3plica

Reputation: 13367

AngularJS typeahead and html in results

I have one view that has this:

<input class="form-control" type="text" name="accountNumber" ng-model="controller.order.accountNumber" typeahead-on-select="controller.onSelect($item)" typeahead="item.title + '<br />' + item.value + '<br />' + item.detail for item in controller.autoComplete($viewValue)" />

I have tried to add some formatting into the result set that is returned. This actually works fine on this view (dispite visual studio moaning about quotation marks).

On another view, I have this set up:

<input class="form-control" type="text" name="sku" ng-model="controller.orderLine.sku" typeahead-on-select="controller.onSelect($item)" typeahead="item.value + '<br />' + item.title + '<br />' +  item.detail for item in controller.autoComplete($viewValue)" />

On this view, the break is shown as text.

I don't suppose anyone knows why?

Upvotes: 1

Views: 44

Answers (1)

r3plica
r3plica

Reputation: 13367

I fixed this by creating a default template:

<a href tabindex="-1">
    <div ng-if="match.model.title"><h4>{{ match.model.title }}</h4></div>
    <div ng-if="match.model.value">{{ match.model.value }}</div>
    <div ng-if="match.model.value">{{ match.model.detail }}</div>
</a>

My typeahead html looks like this:

<div class="col-xs-12 col-md-4">
    <form name="searchForm" role="form">
        <input class="form-control" type="text" placeholder="Search" ng-model="controller.selected" typeahead-on-select="controller.onSelect()" typeahead-template-url="template/typeahead/typeahead-account-match.html" typeahead="item.accountNumber as item for item in controller.autoComplete($viewValue)" />
    </form>
</div>

note: You can see that I am setting the typeahead-template-url to the template above. If your templates are not likely to change, then you can omit that attribute and just override template/typeahead/typeahead-match.html and it will use that.

I hope this helps someone else :)

Upvotes: 1

Related Questions