AngularJS - ui.bootstrap typeahead with an heterogeneous data array

Question

I'm writing a typeahead search bar using ui.bootstrap typeahead and found the component pretty straight forward to use.

My Controller feeds the data into the $scope like this:

var good = [{ name: 'Mario', role: 'sup' }, { name: 'Luigi', role: 'bro' }, { name: 'Yoshi', role: 'pet' }] var bad = [{ badname: 'Bowser', role: 'boss' }, { badname: 'Sauron', role: 'eye' }, { badname: 'Jason', role: 'knifer' }] $scope.data = good.concat(bad) 

Then, in the View, I have something like this:

<div class="container-fluid"> <pre>Model: {{selected| json}}</pre> <input type="text" ng-model="selected" typeahead="datum.name for datum in data | filter:$viewValue | limitTo:4"> </div> 

This ends up searching in the good guys, but not in the bad (because they have badname instead of name

Is there a way to search for both?

---

Bonus: I would love to show the role of my guys below their name... hints?

---

Edit: I'm aware of this Typeahead using object name to select the entire object, but I was hoping show it in the popup too...

---

Plnkr added here -->http://plnkr.co/edit/KqvUlf

Keep the console open, and you will see the issue about the label I was talking about

Only the good guys shows up, end even then the search throws up an exception when searching for a non existent field in the bad guys

Answer 1

I edited your plunkr to answer your bonus question:

http://plnkr.co/edit/Yo4xBT?p=preview

Basically you can use the custom-template to do anything you want with the match.

For the main question, my purist nature would be to advise you to to modify the array to be consistent so you would have to search always in name. Just cause you can do so many things with angular doesn't mean that you should do them, so I am speaking from a purely software engineering perspective.

Edit: I like your json data.

Answer 2

Thanks to @baba I've managed to solve both the main an the bonus issue.

Main Issue

In order to have your data correctly label even with different property names, you can specify multiple labels in the HTML

<div class="container-fluid" ng-controller="TypeaheadCtrl"> <pre>Model: {{selected| json}}</pre> <input type="text" ng-model="selected" typeahead="datum as (datum.name+datum.badname) for datum in data | filter:$viewValue | limitTo:8" typeahead-template-url='tpl.html'> </div> 

This will display one or another, dependent on the data.
Problem is, if both are present, they will both be displayed...

That said, probably the best choice is to create a nicely formatted array for the typeahead, without messing with the code, just like @baba sugggested

---

Bonus Question

Using the match template, the issue is easily solved (for example) like this

tpl.html

 <a> {{match.label}}<br> {{match.model.role}} </a> 

Just so.

Thx again guys

Answer 3

Clarifying to others with the same doubt that I had. If you are wondering why the highlight is gone, you just need to apply to your template the below filter.

<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>