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:

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:

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

  • Fajna sprawa z tym ng-repeat i filtrowaniem :)

  • outlands

    Przydałby się opis, jak radzić sobie z tablicami tablic – wtedy odnosimy się do elementu {{item.nazwa}} ?

    • Przyjmijmy, że mamy tablicę w postaci:

      $scope.arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

      To wyświetlenie wszystkich jej elementów zrealizujemy w taki sposób:

      {{ item }}

      • outlands

        dzięki za odp, na pewno wypróbuję