AngularJS - Typeahead ui.bootstrap avec un tableau de données hétérogène

Je suis en train d’écrire une barre de recherche en utilisant ui.bootstrap typeahead et trouvé le composant assez simple à utiliser.

ma Manette alimente les données dans le $scope comme ça:

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)

Puis dans le Vue, J'ai quelque chose comme ça:

<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>

Cela finit par chercher dans les bons, mais pas dans le mauvais (parce qu'ils ont badname au lieu de name

Y a-t-il un moyen de rechercher les deux?

---

Prime: J'aimerais montrer le role de mes gars ci-dessous leur nom ... des allusions?

---

Modifier: Je suis au courant En-tête utilisant un nom d'objet pour sélectionner l'objet entier, mais j'espérais le montrer aussi dans le popup ...

---

Plnkr ajouté ici -> http://plnkr.co/edit/KqvUlf

Laissez la console ouverte et vous verrez le problème de l'étiquette dont je parlais

Seuls les bons apparaissent, la recherche génère une exception lors de la recherche d'un champ inexistant chez les méchants.

Réponses:

4 pour la réponse № 1

J'ai édité votre plunkr pour répondre à votre question sur les bonus:

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

Fondamentalement, vous pouvez utiliser le modèle personnalisé pour faire tout ce que vous voulez avec la correspondance.

Pour la question principale, ma nature puriste seraitvous conseiller de modifier le tableau pour qu'il soit cohérent afin que vous deviez toujours chercher par nom. Parce que vous pouvez faire tant de choses avec angular ne signifie pas que vous devriez les faire, alors je parle uniquement du point de vue du génie logiciel.

Edit: J'aime vos données JSON.

---

4 pour la réponse № 2

Grâce à @baba J'ai réussi à résoudre le problème principal et le problème des bonus.

Problème principal

Pour que vos données soient correctement étiquetées même avec différents noms de propriété, vous pouvez spécifier plusieurs étiquettes dans le code 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>

Cela affichera l'un ou l'autre, en fonction des données.
Le problème est, si les deux sont présents, ils seront tous les deux être affichées...

Cela dit, le meilleur choix est probablement de créer un tableau joliment formaté pour le typeahead, sans jouer avec le code, juste comme @baba suggéré

---

Question bonus

En utilisant le modèle de correspondance, le problème est facilement résolu (par exemple) comme ceci

tpl.html

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

Just so.

Merci encore les gars

---

1 pour la réponse № 3

Clarifier à d'autres avec le même doute que j'avais. Si vous vous demandez pourquoi la surbrillance a disparu, il vous suffit d'appliquer à votre modèle le filtre ci-dessous.

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

---