Autouzupełniane tagi w Angularze

Niedawno poprosiłem Was o pomoc w znalezieniu sposobu na sprawniejsze wpisywanie składników do przepisu na podstawie słownika. Odzew był niezwykle szybki i już dzisiaj mogę pochwalić się rezultatem, który bardzo mi się podoba 🙂

Niedługo po opublikowaniu posta kolega Gerg0szek podpowiedział jak wyszukać rozwiązanie mojego problemu. Faktycznie nie pomyślałem o tym, że można mój problem porównać do podpowiadania tagów. Okazało się to strzałem w dziesiątkę. Krótki research i już mam ngTagsInput. Świetna biblioteka, której użycie w swoim kodzie znajdziecie poniżej:

HTML

Do widoku musiałem dodać dosłownie kilka linii kodu:

<tags-input ng-model="dish.Ingredients" display-property="name" template="tag-template">
    <auto-complete source="loadIngredients($query)" template="autocomplete-template"></auto-complete>
</tags-input>
<script type="text/ng-template" id="tag-template">

<div class="tag-template">

<div class="right-panel">
            <span>{{$getDisplayText()}}</span>
            <a class="remove-button" ng-click="$removeTag()">✖</a>
        </div>

    </div>

</script>
<script type="text/ng-template" id="autocomplete-template">

<div class="autocomplete-template">

<div class="right-panel">
            <span>{{data.name}}</span>
        </div>

    </div>

</script>

Do tego po stronie kontrolera trzeba było obsłużyć auto uzupełnianie. Zrobiłem to w ten sposób:

$scope.loadIngredients = function (query) {
        var deferred = $q.defer();
        dishService.getIngredient(query).then(function(results) {
            deferred.resolve(results.data);
        });
        return deferred.promise;
    };

Na koniec trzeba było obsłużyć komunikację z bazą w celu zaciągnięcia słownika. To tylko proste zapytanie http get i query do bazy także kodu angularowego serwisu i metody w WebApi już nie wrzucam.

Koniec końców wygląda to tak:

GIF

Jeszcze raz wielkie dzięki kolego. Dzięki Tobie zrobiłem kolejny krok i nauczyłem się sporo.

Related posts