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