AngularJS proste operacje na tabeli i liście

Kategoria wpisu AngularJS, JavaScript, jQuery Tagi: , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Dzisiaj zrobimy coś bardziej praktycznego. Teoria dla wielu osób przeważnie jest nudna (w tym i dla mnie) ?. Dlatego dziś zrobimy coś bardziej praktycznego.

Mini projekt, który chce zrealizować w tej lekcji to sortowanie danych z tablicy. Używając określenia tablica mam na myśli uproszczone wersję bezy danych. Prostą tabelę z informacjami.

Budowa prostej tablicy z danymi

Moja tablica dla prostoty będzie składać się tylko z 2 kolumn i 4 wierszy. Najprościej zobrazuję to na przykładzie tabeli:

ImięNazwisko
JanKowalski
AnnaNowak
MariaKowal
TomaszNowicki

Dla ułatwienia dodałam 5 wiersz z nagłówkiem. Czyli już wiecie, że będę operowała danymi Imię i Nazwisko (dla wyrobienia dobrych nawyków lepiej używać angielskich nazw pól). Na początku dla osób, które nigdy nie pracowały z obiektami takimi jak baza danych może to się wydać nieco dziwne.

Jak zapisać dane?

Dane możemy zapisać na kilka sposobów. W tym konkretnym przypadku skorzystamy z ng-init:

Jak widzicie nie jest to jakoś specjalnie skomplikowane. Każdy wiersz znajduje się pomiędzy klamrami {} następnie podajemy nazwę pola oraz w cudzysłowie wartość. Nazwy pul z wartościami udzielamy przecinkami. Nasza tablica nosi też nazwą „names”

Jak wypisać zawartość?

Wypisywanie pojedynczych ciągów wyrazów do trudnych nie należy, ale jak wypisać tabelę?

W tym wypadku przyda się nam operator/detektywa ng-repeat. Z jej pomocą będziemy mogli wypisać nasze dane, jednak najpierw trzeba ją będzie skonfigurować.

W tym celu deklarujemy: ng-repeat=”x in names” – struktura jest analogiczna jak w innych pętlach.

Powyższy kod stworzy pętlę, która zakończy się w momencie gdy zabraknie elementów tablicy.

Po złożeniu wygląda to tak:

See the Pen AngularJS list by Aura (@Julka85) on CodePen.0

No dobrze posiadamy już listę, ale co z jej sortowaniem? I jak uzyskać wygląd tabeli?

Budujemy prosty moduł z danymi

Teraz wprowadzimy zmiany w strukturze naszej aplikacji. Pierwszą poważną będzie przeniesienie naszych danych do modułu. Jak zbudować prosty moduł napisałam w poprzedniej lekcji.

Jak widać wszystkie nasze elementy zostały przeniesione do elementu $scope.names. Od tej chwili to na nim „będziemy wykonywać operację”.

Kod HTML w tym wypadku będzie wyglądał następująco:

W znaczniku ng-app wywołujemy modół myApp.

Poniżej możecie zobaczyć efekt końcowy (trochę go pokolorowałam ?).

See the Pen
Order by
by Aura (@Julka85)
on CodePen.

Zadanie domowe dla chętnych: Zbuduj prosty mechanizm filtrujący dane tabeli lub listy składającej się z minimum 5 wierszy i 3/4 kolumn. ?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *