Tabele są jednym z typowych elementów używanych w HTML podczas pracy ze stronami internetowymi.
Tabele w HTML są projektowane przy użyciu tagu HTML
Tag
- jest to główny tag używany do wyświetlania tabeli.
- ten tag służy do segregowania wierszy w tabeli.
- ten znacznik służy do wyświetlania rzeczywistych danych tabeli.
- jest używany dla danych nagłówka tabeli.
Korzystając z powyższych dostępnych tagów HTML wraz z AngularJS, możemy ułatwić wypełnianie danych w tabeli. Krótko mówiąc, dyrektywa ng-repeat służy do wypełniania danych w tabeli.
W tym rozdziale przyjrzymy się, jak to osiągnąć. Przyjrzymy się również, jak możemy użyć filtrów kolejności i wielkich liter wraz z użyciem atrybutu $ index do wyświetlania indeksów tabel kątowych.
W tym samouczku nauczysz się:
Wypełniaj i wyświetlaj dane w tabeli
Wbudowany filtr AngularJS
Sortuj tabelę za pomocą filtra OrderBy
Wyświetl tabelę z filtrem wielkich liter
Wyświetl indeks tabeli ($ index)
Wypełniaj i wyświetlaj dane w tabeli
Jak omówiliśmy we wstępie do tego rozdziału, podstawa tworzenia struktury tabeli na stronie HTML pozostaje taka sama.
Struktura tabeli jest nadal tworzona przy użyciu zwykłych znaczników HTML
,
,
i
. Jednak dane są wypełniane przy użyciu dyrektywy ng-repeat w AngularJS.
Spójrzmy na prosty przykład tego, jak możemy zaimplementować tabele kątowe.
W tym przykładzie
Stworzymy tabelę Angular, która będzie zawierała tematy kursów wraz z ich opisami.
Krok 1) Najpierw dodamy tag „style” do naszej strony HTML, aby tabela mogła być wyświetlana jako właściwa tabela.
Znacznik stylu zostanie dodany do strony HTML. Jest to standardowy sposób dodawania atrybutów formatowania, które są wymagane dla elementów HTML.
Do naszej tabeli dodajemy dwie wartości stylu.
Po pierwsze, powinna istnieć solidna granica dla naszego stołu Angular i
Po drugie, dla danych naszej tabeli kątowej powinno zostać wprowadzone dopełnienie.
Krok 2) Następnym krokiem jest napisanie kodu generującego tabelę i jej dane.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Objaśnienie kodu:
Najpierw tworzymy zmienną o nazwie „tutorial” i przypisujemy jej kilka par klucz-wartość w jednym kroku. Każda para klucz-wartość będzie używana jako dane podczas wyświetlania tabeli. Zmienna samouczka jest następnie przypisywana do obiektu zasięgu, aby można było uzyskać do niej dostęp z naszego widoku.
To jest pierwszy krok w tworzeniu tabeli i używamy tagu
.
Dla każdego wiersza danych używamy „dyrektywy ng-repeat”. Ta dyrektywa przechodzi przez każdą parę klucz-wartość w obiekcie tuto, zakres rial przy użyciu zmiennej ptutor.
Na koniec używamy znacznika
wraz z parami klucz-wartość (ptutor.Name i ptutor.Description) do wyświetlania danych tabeli Angular.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z powyższego wyniku,
Widzimy, że tablica wyświetla się poprawnie z danymi z tablicy par klucz-wartość zdefiniowanych w kontrolerze.
Dane tabeli zostały wygenerowane, przechodząc przez każdą z par klucz-wartość przy użyciu dyrektywy „ng-repeat”.
Wbudowany filtr AngularJS
Bardzo często używa się wbudowanych filtrów w AngularJS do zmiany sposobu wyświetlania danych w tabelach. Widzieliśmy już filtry w akcji we wcześniejszym rozdziale. Zanim przejdziemy dalej, zróbmy krótkie podsumowanie filtrów.
W Angular.JS filtry służą do formatowania wartości wyrażenia przed wyświetleniem jej użytkownikowi. Przykładem filtru jest filtr „wielkie litery”, który pobiera łańcuch wyjściowy, formatuje go i wyświetla wszystkie znaki w ciągu jako wielkie litery.
Zatem w poniższym przykładzie, jeśli wartość zmiennej „TutorialName” to „AngularJS”, wynikiem poniższego wyrażenia będzie „ANGULARJS”.
{{TurotialName | duże litery }}
W tej sekcji przyjrzymy się bardziej szczegółowo, jak filtry orderBy i dużymi literami mogą być używane w tabelach.
Sortuj tabelę za pomocą filtra OrderBy
Ten filtr służy do sortowania tabeli na podstawie jednej z kolumn tabeli. W poprzednim przykładzie dane wyjściowe naszej tabeli Angular wyglądały tak, jak pokazano poniżej.
Kontrolery
Kontrolery w akcji
Modele
Modele i wiążące dane
Dyrektywy
Elastyczność dyrektyw
Spójrzmy na przykład, jak możemy użyć filtru „orderBy” i posortować dane tabeli Angular przy użyciu pierwszej kolumny w tabeli.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Objaśnienie kodu:
Używamy tego samego kodu, co do tworzenia naszej tabeli, jedyną różnicą tym razem jest to, że używamy filtru „orderBy” wraz z dyrektywą ng-repeat. W tym przypadku mówimy, że chcemy uporządkować tabelę po klawiszu „Nazwa”.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia,
Widzimy, że dane w tabeli Angular zostały posortowane zgodnie z danymi w pierwszej kolumnie. W naszym zbiorze danych dane „Dyrektywy” pochodzą z danych „Modele”, ale ponieważ zastosowaliśmy filtr orderBy, tabele są odpowiednio sortowane.
Wyświetl tabelę z filtrem wielkich liter
Możemy również użyć filtra wielkich liter, aby zmienić dane w tabeli Angular na wielkie litery.
Spójrzmy na przykład, jak możemy to osiągnąć.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Objaśnienie kodu:
Używamy tego samego kodu, co do tworzenia naszej tabeli, jedyną różnicą tym razem jest to, że używamy filtra wielkich liter. Używamy tego filtru w połączeniu z parametrem „ptutor.Name”, aby cały tekst w pierwszej kolumnie był wyświetlany wielkimi literami.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia,
Widzimy, że używając filtru „wielkie litery”, wszystkie dane w pierwszej kolumnie są wyświetlane z wielkimi literami.
Wyświetl indeks tabeli ($ index)
Aby wyświetlić indeks tabeli, dodaj
z $ index.
Spójrzmy na przykład, jak możemy to osiągnąć.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Objaśnienie kodu:
Używamy tego samego kodu, co do tworzenia naszej tabeli, jedyną różnicą tym razem jest to, że dodajemy dodatkowy wiersz do naszej tabeli, aby wyświetlić kolumnę indeksu.
W tej dodatkowej kolumnie używamy właściwości „$ index” dostarczonej przez AngularJS, a następnie używamy operatora +1 do zwiększania indeksu dla każdego wiersza.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia,
Widać, że została utworzona dodatkowa kolumna. W tej kolumnie widzimy indeksy tworzone dla każdego wiersza.
Podsumowanie:
Struktury tabel są tworzone przy użyciu standardowych tagów dostępnych w HTML. Dane w tabeli są wypełniane przy użyciu dyrektywy „ng-repeat”.
Filtr orderBy może służyć do sortowania tabeli na podstawie dowolnej kolumny w tabeli.
Filtr wielkich liter może służyć do wyświetlania danych w dowolnej kolumnie tekstowej wielkimi literami.
Właściwość „$ index” może służyć do tworzenia indeksu dla tabeli.
Jednym z częstych problemów napotykanych podczas programowania tabel AngularJS.JS jest implementacja dużych zbiorów danych, które zawierają ponad 1000 wierszy danych. Czasami dyrektywa ng-repeat może przestać odpowiadać, przez co cała strona czasami przestaje odpowiadać. W takim przypadku zawsze lepiej jest mieć paginację, w której wiersze danych są rozmieszczone na wielu stronach.
