AngularJS - ui.bootstrap wpisuje się z heterogeniczną tablicą danych - angularjs, bootstrap-typeahead, angular-ui-bootstrap

Piszę pasek wyszukiwania z użyciem nagłówka ui.bootstrap typeahead i znalazłem komponent całkiem prosto do użycia.

Mój Kontroler przekazuje dane do $scope lubię to:

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)

Następnie w WidokMam coś takiego:

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

To kończy się poszukiwaniem w dobrych ludziach, ale nie w złym (ponieważ oni mają badname zamiast name

Czy istnieje sposób na wyszukiwanie obu?

---

Premia: Chciałbym pokazać role moich chłopaków pod ich imieniem ... podpowiedzi?

---

Edytować: Jestem tego świadomy Wpisz nagłówek, używając nazwy obiektu aby wybrać cały obiekt, ale miałem nadzieję, że pokażę to również w popup ...

---

Pnkr dodał tutaj -> http://plnkr.co/edit/KqvUlf

Pozostaw konsolę otwartą, a zobaczysz problem dotyczący etykiety, o której mówiłem

Pojawiają się tylko dobrzy faceci, kończą nawet wtedy, gdy szukanie rzuca wyjątek, szukając nieistniejącego pola w złych ludziach

Odpowiedzi:

4 dla odpowiedzi № 1

Zmontowałem twój plunkr, aby odpowiedzieć na twoje pytanie premiowe:

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

Zasadniczo możesz użyć niestandardowego szablonu, aby zrobić cokolwiek z tym dopasowaniem.

Głównym pytaniem byłaby moja purystyczna naturaaby doradzić, aby zmodyfikować tablicę tak, aby była spójna, więc będziesz musiał szukać zawsze z imienia i nazwiska. Tylko dlatego, że możesz robić tak wiele rzeczy z kanciastym, nie znaczy, że powinieneś je robić, więc mówię z czysto inżynierskiej perspektywy.

Edycja: Lubię twoje dane json.

---

4 dla odpowiedzi nr 2

Dzięki @baba Udało mi się rozwiązać zarówno główny, jak i dodatkowy problem.

Główna kwestia

Aby dane były poprawnie etykietowane nawet przy różnych nazwach właściwości, możesz podać wiele etykiet w kodzie 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>

Wyświetli się jeden lub drugi, zależnie od danych.
Problem polega na tym, że jeśli oba są obecne, będą obie być wyświetlane ...

To powiedziawszy, prawdopodobnie najlepszym wyborem jest stworzenie ładnie sformatowanej tablicy dla typeahead, bez naruszania kodu, podobnie jak @baba sugerowane

---

Pytanie dodatkowe

Przy użyciu szablonu dopasowania problem można łatwo rozwiązać (na przykład) w ten sposób

tpl.html

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

Tak więc.

Raz jeszcze chłopaki

---

1 dla odpowiedzi nr 3

Wyjaśniając innym z takimi samymi wątpliwościami, jakie miałem. Jeśli zastanawiasz się, dlaczego najważniejszego elementu nie ma, powinieneś zastosować do swojego szablonu poniższy filtr.

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

---