AngularJS #5 – ng-repeat

AngularJS



W poprzednim wpisie wprowadziłem Was w tematykę filtrów w AngularJS. Mocno powiązanym elementem jest dyrektywa ngRepeat, która pozwala na iterowanie po kolekcji elementów oraz ich wyświetlanie i / lub filtrowanie.

Wyobraźmy sobie znany pewnie wszystkich mechanizm foreach znany z innych języków programowania. Użycie dyrektywy ng-repeat pozwala właśnie na zbudowanie iteratora dla zdefiniowanej kolekcji elementów. Całość jest banalnie prosta w użyciu, a sama dyrektywa ngRepeat posiada kilka wbudowanych wartości, które możemy użyć w ramach iterowanej kolecji. W oficjalnej dokumentacji AngularJS przedstawiona została tabela opisująca te wartości.

Przykład użycia bez filtrowania:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/EGW5w/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dzięki tym kilku linijkom w HTML jesteśmy w stanie wyświetlić wszystkie elementy z tablicy $scope.cities zdefiniowanej w kontrolerze.

Przykład użycia z filtrowaniem wyników:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/EGW5w/9/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

By filtrować wylistowane wyniki wystarczyło dodać nowe pole input nad listą oraz zdefiniować dla niego dyrektywę ng-model. Następnie w wywołaniu ng-repeat dodałem parametr filter z nazwą ng-model zdefiniowanego na pola input. Całość działa bez największych problemów. Czegóż chcieć więcej?

Odpowiednik http://egghead.io

[youtube_sc url=”https://www.youtube.com/watch?v=bLohP9mh8ks”]

AngularJS #4 – Wprowadzenie do filtrów

AngularJS



W wyniku przedświątecznej gorączki i mojego “niedoczasu” nie dałem rady postarać się o kolejny wpis w zeszłym tygodniu. Tym razem chciałbym zrobić mały wstęp do filtrów w AngularJS.

W planach na kolejne artykuły o AngularJS są dyrektywy, serwisy, providery, factory oraz wiele innych, ale warto także poznać te podstawowe mechanizmy. Jednym z nich jest własnie serwis $filter lub jak kto woli ngFilter. Filtrów, tych wbudowanych, jak i tych własnych używać możemy po stronie widoków w naszym HTML, ale zarówno w kontrolerach. Służą one do modyfikowania wartości zdefiniowanych w $scope lub właśnie filtrowania kolekcji bez wpływu na ich rzeczywistą wartość.W widokach ich użycie sprowadza się do postawienia pipeline zaraz za wartością, po którym podajemy nazwę filtra, który chcemy wykorzystać. W samych kontrolerach jest to wstrzykiwany serwis $filter, który pozwala na wywołanie konkretnego filtra poprzez parametry funkcji.

Użycie filtrów przedstawia się następująco:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/EGW5w/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

AngularJS posiada listę wbudowanych filtrów, które możemy używać wraz z samym tylko frameworkim. Nie jest ona imponująca, ale twórcy dali nam mechanizm do tworzenia własnych filtrów, który często się przydaje podczas pisani aplikacji z wykorzystaniem AngularJS.

Napiszę tym samym prosty filtr, który pozwoli dzielić wpisaną w pole input wartość na pojedyncze znaki i wyświetlać je z podkreśleniem jako separatorem.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/EGW5w/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Tym prostym sposobem możemy pisać własne transformery, dekoratory, czy po prostu filtry.

Zapraszam jednocześnie do obejrzenia kolejnego odcinka z http://egghead.io

[youtube_sc url=”https://www.youtube.com/watch?v=FX5TwV2ZKqc”]