AngularJS - ui.bootstrap typeahead con una matriz de datos heterogéneos - angularjs, bootstrap-typeahead, angular-ui-bootstrap

Estoy escribiendo una barra de búsqueda de typeahead usando ui.bootstrap typeahead y encontró el componente bastante sencillo de usar.

Mi Controlador alimenta los datos en el $scope Me gusta esto:

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)

Luego, en el Ver, Tengo algo como esto:

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

Esto termina buscando en los buenos, pero no en los malos (porque tienen badname en lugar de name

¿Hay una manera de buscar ambos?

---

Prima: Me encantaría mostrar el role de mis muchachos debajo de su nombre ... pistas?

---

Editar: Soy consciente de esto Typeahead usando nombre de objeto para seleccionar el objeto completo, pero esperaba mostrarlo también en la ventana emergente ...

---

Plnkr añadido aquí -> http://plnkr.co/edit/KqvUlf

Mantenga la consola abierta y verá el problema sobre la etiqueta de la que estaba hablando.

Solo se muestran los buenos, y hasta la búsqueda finaliza una excepción cuando se busca un campo inexistente en los malos.

Respuestas

4 para la respuesta № 1

Edité su plunkr para responder a su pregunta de bonificación:

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

Básicamente, puedes usar la plantilla personalizada para hacer lo que quieras con la coincidencia.

Para la pregunta principal, mi naturaleza purista seríapara recomendarle que modifique la matriz para que sea coherente, de modo que tenga que buscar siempre en el nombre. El hecho de que pueda hacer tantas cosas con angular no significa que deba hacerlo, por lo que estoy hablando desde una perspectiva puramente de ingeniería de software.

Edit: Me gustan tus datos json.

---

4 para la respuesta № 2

Gracias a @baba He logrado resolver tanto el problema principal como el de bonificación.

Tema principal

Para que sus datos se etiqueten correctamente incluso con nombres de propiedades diferentes, puede especificar varias etiquetas en el 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>

Esto mostrará uno u otro, dependiendo de los datos.
El problema es que si ambos están presentes, lo harán. ambos se visualizará...

Dicho esto, probablemente la mejor opción sea crear una matriz bien formateada para el typeahead, sin alterar el código, como @baba sugerido

---

Pregunta extra

Usando la plantilla de coincidencia, el problema se resuelve fácilmente (por ejemplo) de esta manera

tpl.html

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

Tan.

Gracias de nuevo chicos

---

1 para la respuesta № 3

Aclarando a los demás con la misma duda que yo tenía. Si se está preguntando por qué desapareció el resaltado, solo necesita aplicar a su plantilla el siguiente filtro.

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

---