AngularUI-Bootstrap Typeahead: Grupowanie wyników

Question

Wprowadzam typeahead przy użyciu AngularUI-Bootstrap. Muszę pokazać wyniki pogrupowane na podstawie niektórych wartości pochodzących z bazy danych. Oto przykładowy scenariusz

1. W bazie danych jest kilku użytkowników, każdy użytkownik ma "Dział". Jedna nazwa użytkownika może być dostępna w wielu działach.
2. Typy użytkowników końcowych w nazwach do wyszukiwania użytkowników z bazy danych i pobierania listy na liście wpisów. Ponieważ jedna nazwa użytkownika może należeć do wielu działów, wymagane jest wyświetlanie nazw użytkowników pogrupowanych według różnych działów. Coś takiego:
3. Następnie użytkownik może wybrać żądaną nazwę użytkownika i kontynuować.

Zgodnie z dokumentacją obecny hereTypeahead, nie widzę żadnych opcji, aby zaspokoić moje wymagania.

Próbowałem tego obejścia: Kiedy tablica wpisywanie znaków z wyprzedzeniem powstaje coraz, ja się z działem obsługi dołączana do elementu tablicy:

$scope.fetchUsers = function(val) { 
     console.log("Entered fetchUsers function"); 
     return $http.get("http://localhost:8080/TestWeb/users", { 
      params : { 
       username : val 
      } 
     }).then(function(res) { 
      console.log("Response:",res); 
      var users = []; 
      angular.forEach(res.data, function(item) { 
       users.push(item.UserName + " - " + item.UserDepartment); 
      }); 
      console.log("users=",users); 
      return users; 
     }); 
    }; 

ten sposób, przynajmniej końcowy użytkownik widzi dział. Ale kiedy wybiorę rekord, wybrana wartość jest pełną treścią elementu tablicy. Poniżej przykładowy zrzut ekranu do opracowania:

HTML

użytkownikom usługi lokalnej

<pre>Model: {{userList | json}}</pre> 
<input type="text" ng-model="userList" placeholder="Users loaded from local database" 
typeahead="username for username in fetchUsers($viewValue)" 
typeahead-loading="loadingUsers" class="form-control"> 
<i ng-show="loadingUsers" class="glyphicon glyphicon-refresh"></i> 

Typy użytkowników w ciągu

Użytkownik wybiera jeden rekord

chcę uniknąć dział (w tym przypadku ciąg - Desc 4), gdy użytkownik wybierze rekord.

Czy istnieje sposób, w jaki mogę osiągnąć to grupowanie bez obejścia? Czy jest jakiś sposób mogę poprawić moje obejście?

Answer 1

Miałem podobne wymagania i oto, jak to zrobiłem.

Przykład Plunker:http://plnkr.co/edit/zujdouvB4bz7tFX8HaNu?p=preview

Sztuką jest, aby ustawić typeahead-template-url do szablonu niestandardowego produktu:

<input type="text" class="form-control" placeholder="Users loaded from local database" 
    ng-model="selectedUser" 
    typeahead="user as user.name for user in getUsers($viewValue)" 
    typeahead-template-url="typeahead-item.html" /> 

Szablon pozycja ta reprezentuje każdy element z listy rozwijanej:

<div class="typeahead-group-header" ng-if="match.model.firstInGroup">Desc {{match.model.group}}</div> 
<a> 
    <span ng-bind-html="match.label | typeaheadHighlight:query"></span> 
</a> 

Jak widać, istnieje ng-if, aby pokazać nagłówek grupy, jeśli to pozycja ma właściwość firstInGroup ustawioną na true.

W firstInGroup właściwości są wypełniane jak to przy użyciu lodashjs:

$scope.getUsers = function (search) { 
    var filtered = filterFilter(users, search); 

    var results = _(filtered) 
    .groupBy('group') 
    .map(function (g) { 
     g[0].firstInGroup = true; // the first item in each group 
     return g; 
    }) 
    .flatten() 
    .value(); 

    return results; 
} 

Nadzieja to pasuje do Państwa wymagań zbyt.

Answer 2

można znaleźć tutaj http://plnkr.co/edit/DmoEWzAUHGEXuHILLPBp?p=preview

zamiast tworzyć nowe obiekty tutaj:

angular.forEach(res.data, function(item) { 
       users.push(item.UserName + " - " + item.UserDepartment); 
      }); 

użycie utworzyć szablon:

<script type="text/ng-template" id="customTemplate.html"> 
    <a> {{ match.model.name}} - department : {{match.model.dept}}</a> 
    </script> 

i używać go w wpisywanie znaków z wyprzedzeniem dyrektywy

<input type="text" ng-model="selected" 
typeahead="user.name as user for user in users | filter:$viewValue | limitTo:8" class="form-control" 
typeahead-template-url="customTemplate.html">