Tabela AngularJS: sortowanie z użyciem orderBy i filtrem wielkich liter

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

⚡ Inteligentne podsumowanie

Sortowanie, porządkowanie i formatowanie tekstu w AngularJS opiera się na dyrektywie ng-repeat oraz wyrażeniu filtra. Ta strona pokazuje, jak orderBy, uppercase, filter i $index zamieniają prostą tabelę HTML w dynamiczną siatkę opartą na danych.

  • 🧱 Struktura: Znaczniki table, tr, td i th nadal tworzą siatkę, więc żaden specyficzny dla AngularJS znacznik nie zastępuje standardowego HTML.
  • 🔁 Populacja: Dyrektywa ng-repeat przegląda tablicę w obiekcie zakresu i emituje jeden wiersz dla każdego znalezionego elementu.
  • ↕️ Kolejność: Filtr orderBy sortuje wiersze według dowolnego klucza, a flaga odwrotna zmienia kierunek na żądanie.
  • 🔤 Formatowanie: Filtr wielkich liter kapitalizuje pojedynczą kolumnę bez zmiany podstawowych danych w kontrolerze.
  • 🔎 Badawczy: Filtr filtr powiązany z danymi wejściowymi ng-model zawęża widoczne wiersze w miarę pisania przez czytelnika.
  • 🔢 Numeracja: Właściwość $index udostępnia licznik zerowy, więc dodanie jedynki powoduje powstanie czytelnego numeru wiersza.
  • 🚀 Skala: Powyżej tysiąca wierszy sparuj limitTo z paginacją i track by zachować responsywność strony.
Czytaj więcej

Tabela AngularJS

Tabele są jednym z powszechnych elementów używanych w języku HTML podczas pracy ze stronami internetowymi.

Tabele w HTML są projektowane przy użyciu znacznika HTML

  1. tag – Jest to główny tag używany do wyświetlania tabeli.
  2. – Znacznik ten służy do segregowania wierszy w tabeli.
  3. – Ten znacznik służy do wyświetlania aktualnych danych tabeli.
  4. – Służy do danych nagłówka tabeli.

Korzystanie z powyższych dostępnych tagów HTML wraz z angularjs, możemy ułatwić wypełnianie danych 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 używać filtrów orderBy i wielkich liter, a także atrybutu $index do wyświetlania indeksów tabel AngularJS. Pierwszym krokiem jest sam kod.

Wypełnianie i wyświetlanie danych 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że dane są wypełniane przy użyciu dyrektywy ng-repeat w AngularJS.
Przyjrzyjmy się prostemu przykładowi implementacji tabel AngularJS.
W tym przykładzie

Stworzymy tabelę AngularJS, która będzie zawierała tematy kursów wraz z opisami.

Krok 1) Najpierw dodamy do naszej strony HTML znacznik „style”, dzięki któremu tabela będzie mogła zostać wyświetlona jako prawidłowa tabela.

Wypełnianie i wyświetlanie danych w tabeli

  1. Znacznik stylu zostanie dodany do strony HTML. Jest to standardowy sposób dodawania wszelkich atrybutów formatowania wymaganych dla elementów HTML.
  2. Do naszej tabeli dodajemy dwie wartości stylu.
  • Jednym z nich jest konieczność stworzenia solidnej granicy dla naszej tabeli AngularJS i
  • Po drugie, powinniśmy zastosować wypełnienie dla danych w tabeli AngularJS.

Krok 2) Następnym krokiem jest napisanie kodu generującego tabelę i zawarte w niej dane.

Wypełnianie i wyświetlanie danych w tabeli

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

⚠️ Ostrzeżenie: Niniejsza oferta została odtworzona dokładnie w takiej formie, w jakiej została opublikowana, jednak cztery linijki w niej zawarte są błędne. chrset błędy ortograficzne charset. Trzy kompilacje AngularJS ładują się jednocześnie, czyli o jedną za dużo. lib/bootstrap.js oraz lib/bootstrap.css nie istnieją. Zachowaj angular.min.js tylko.

Code Wyjaśnienie

  1. Najpierw tworzymy zmienną o nazwie „samouczek” 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 zakresu, tak aby można było uzyskać do niej dostęp z naszego widoku.
  2. Jest to pierwszy krok w tworzeniu tabeli i używamy etykietka.
  3. Dla każdego wiersza danych używamy „dyrektywy ng-repeat”. Ta dyrektywa przechodzi przez każdą parę klucz-wartość w obiekcie zakresu tutoriala przy użyciu zmiennej ptutor.
  4. Na koniec używamy tag wraz z parami klucz-wartość (ptutor.Name i ptutor.Description), aby wyświetlić dane z tabeli AngularJS.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wydajność

Wypełnianie i wyświetlanie danych w tabeli

Z powyższego wyniku

  • Możemy zobaczyć, że tabela jest wyświetlana prawidłowo przy użyciu danych z tablicy par klucz-wartość zdefiniowanych w kontrolerze.
  • Dane tabeli zostały wygenerowane poprzez przejrzenie każdej pary klucz-wartość przy użyciu „dyrektywy ng-repeat”.

Surowe wiersze to dopiero punkt wyjścia, ponieważ filtry decydują o tym, jak te wiersze są uporządkowane i sformatowane.

Wbudowany filtr AngularJS

Bardzo często używa się wbudowanych filtrów w AngularJS, aby zmienić sposób wyświetlania danych w tabelach. Widzieliśmy już filtry w działaniu w poprzednim rozdziale. Zróbmy szybkie podsumowanie filtrów, zanim przejdziemy dalej.

W AngularJS filtry służą do formatowania wartości wyrażenia przed jej wyświetleniem użytkownikowi. Przykładem filtra jest filtr „wielkie litery”, który przyjmuje ciąg znaków jako wynik, 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”.

{{ TutorialName | uppercase }}

W tej sekcji przyjrzymy się bardziej szczegółowo, jak można używać filtrów OrderBy i wielkich liter w tabelach.

Typowe filtry AngularJS używane z tabelami

Poniższa tabela porównuje filtry najczęściej używane w wyrażeniu ng-repeat.

Filtruj Cel Przykład
zamów według Sortuje wiersze według klucza | orderBy : 'Name'
filtrować Utrzymuje pasujące wiersze | filter : searchText
wielkie litery Kapitalizacja tekstu | uppercase
małe Obniża tekst | lowercase
limitTo Liczba wierszy czapek | limitTo : 25
waluta Formaty pieniędzy | currency : '$'
dane Formaty dat | date : 'dd MMM yyyy'
numer Ustawia liczby dziesiętne | number : 2

Sortowanie to filtr, o który czytelnicy proszą w pierwszej kolejności, dlatego filtr orderBy jest następny.

Sortuj tabelę za pomocą filtra OrderBy

Ten filtr służy do sortowania tabeli według jednej z kolumn. W poprzednim przykładzie dane wyjściowe naszej tabeli AngularJS wyglądały tak, jak pokazano poniżej.

Sterowniki Kontrolerzy w akcji
modele Modele i dane wiążące
Dyrektywy Elastyczność dyrektyw

Przyjrzyjmy się przykładowi, w jaki sposób można użyć filtru „orderBy” i posortować dane w tabeli AngularJS według pierwszej kolumny w tabeli.

Sortuj tabelę za pomocą filtra OrderBy

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Wyjaśnienie

  1. Używamy tego samego kodu, co przy tworzeniu naszej tabeli, jedyną różnicą jest to, że tym razem używamy filtra „orderBy” wraz z dyrektywą ng-repeat. W tym przypadku mówimy, że chcemy zamówić stół po klawiszu „Nazwa”.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wydajność

Sortuj tabelę za pomocą filtra OrderBy

Z wyjścia,

  • Widzimy, że dane w tabeli AngularJS zostały posortowane zgodnie z danymi w pierwszej kolumnie. Tablica jest zadeklarowana w kolejności: Kontrolery, Modele, Dyrektywy, więc bez filtra wiersze pojawiają się w tej kolejności. orderBy : 'Name' sortuje wartości Nazw alfabetycznie, co powoduje przesunięcie Dyrektyw przed Modelami i utworzenie Kontrolerów, Dyrektyw, Modeli.

Sortuj Reverse i z nagłówków kolumn

Filtr orderBy akceptuje drugi argument. Przekazanie true odwraca kierunek i przechowuje zarówno klucz, jak i tę flagę w zakresie, co pozwala czytelnikowi na ponowne posortowanie tabeli poprzez kliknięcie nagłówka, ponieważ zamów przez odniesienie opisuje.

<table>
    <tr>
        <th ng-click="sortKey='Name'; reverse=!reverse">Name</th>
        <th ng-click="sortKey='Description'; reverse=!reverse">Description</th>
    </tr>
    <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Kolejność zmienia kolejność wierszy. Następny filtr zmienia sposób odczytu pojedynczej kolumny.

POWIĄZANE ARTYKUŁY

Wyświetl tabelę z filtrem wielkich liter

Możemy również użyć filtra wielkich liter, aby zmienić litery w tabeli AngularJS na wielkie.

Przyjrzyjmy się przykładowi, jak możemy to osiągnąć.

Wyświetl tabelę z filtrem wielkich liter

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name | uppercase}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Wyjaśnienie

  1. Używamy tego samego kodu, którego użyliśmy do utworzenia naszej tabeli, jedyną różnicą jest to, że tym razem używamy filtra wielkich liter. Używamy tego filtra w połączeniu z „ptutor.Name”, aby cały tekst w pierwszej kolumnie był wyświetlany wielkimi literami.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wydajność

Wyświetl tabelę z filtrem wielkich liter

Z wyjścia,

  • Możemy zauważyć, że po zastosowaniu filtra „wielkie litery” wszystkie dane w pierwszej kolumnie są wyświetlane wielkimi literami.

Formatowanie kolumny jest przydatne, a czytelnicy często chcą mieć obok niej numer wiersza.

Wyświetl indeks tabeli ($index)

Aby wyświetlić indeks tabeli, dodaj a z indeksem $.

Przyjrzyjmy się przykładowi, jak możemy to osiągnąć.

Wyświetl indeks tabeli

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{$index + 1}}</td>
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Wyjaśnienie

  1. Używamy tego samego kodu, którego użyliśmy do utworzenia tabeli. Jedyną różnicą jest to, że tym razem dodajemy do tabeli dodatkowy wiersz, aby wyświetlić kolumnę indeksu. W tej dodatkowej kolumnie używamy właściwości „$index” dostarczonej przez AngularJS, a następnie operatora +1, aby zwiększyć indeks dla każdego wiersza.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wydajność

Wyświetl indeks tabeli

Z wyjścia,

  • Widać, że utworzono dodatkową kolumnę. W tej kolumnie możemy zobaczyć indeksy tworzone dla każdego wiersza.

Trzy wiersze mieszczą się na jednym ekranie. Realistyczny zbiór danych nie mieści się w jednym miejscu, więc czytelnicy potrzebują sposobu na przeszukiwanie go.

Jak filtrować i przeszukiwać dane w tabeli AngularJS

AngularJS dostarcza filtr o nazwie filterUmieszczony po komendzie ng-repeat, porównuje każdy element tablicy z wartością i zachowuje tylko pasujące wiersze. Powiąż tę wartość z polem tekstowym za pomocą komendy ng-model, a tabela zawęża się podczas pisania przez czytelnika, bez obsługi zdarzeń i kodu kontrolera.

Dodaj wyszukiwanie na żywo Box

Dodaj jedno pole wejściowe nad tabelą i przepuść tablicę przez filtr. Oba mają tę samą właściwość zakresu, więc AngularJS ponownie oblicza wyrażenie po każdym naciśnięciu klawisza.

<input type="text" ng-model="searchText" placeholder="Search topics">

<table>
    <tr ng-repeat="ptutor in tutorial | filter : searchText">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Code Wyjaśnienie:

  1. Wejście zapisuje wszystko, co jest wpisywane searchText na zakres.
  2. filter : searchText zachowuje wiersze, których nazwa lub Description zawiera ten podciąg, ignorując wielkość liter.
  3. Aby przeszukać pojedynczą kolumnę, przekaż obiekt: filter : {Name : searchText}.
  4. Filtry łańcuchowe, więc | filter : searchText | orderBy : 'Name' najpierw przeszukuje, a potem sortuje ocalałych.

Utrzymuj responsywność dużych tabel

Jednym z częstych problemów napotykanych podczas tworzenia tabel AngularJS jest duży zbiór danych zawierający tysiąc lub więcej wierszy. ng-powtórz Dyrektywa tworzy zakres i obserwatora dla każdego wiersza, dzięki czemu strona może przestać odpowiadać. Zamiast tego rozłóż wiersze na stronach i dodaj track by dzięki czemu istniejące wiersze są ponownie wykorzystywane, a nie przebudowywane.

<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">

FAQ

Funkcja ng-repeat wymaga unikalnego klucza dla każdego wiersza. Dwie identyczne wartości powodują błąd duplikatów. Dodaj odrębną właściwość lub zapisz track przez $index, więc pozycja wiersza staje się kluczem, a nie jego wartością.

Tak. Przekaż tablicę kluczy, np. orderBy : ['Nazwa','Description']. AngularJS sortuje według pierwszego klucza, a następnie rozwiązuje powiązania z drugim. Dodaj przed kluczem znak minus, aby odwrócić kolejność tylko tego klucza.

Każdy wiersz ng-repeat ujawnia wartości logiczne $even i $odd. Powiąż jeden z nich z ng-class lub ng-if, aby zastosować kolor tła, co spowoduje utworzenie paskowanych wierszy bez konieczności stosowania dodatkowego selektora CSS w tabeli.

Asystenci tacy jak Drugi pilot GitHub Szybko tworzą znaczniki ng-repeat, ale wciąż wymyślają ścieżki skryptów i błędnie piszą atrybuty. Sprawdź każdą sugestię pod kątem Odwołanie do filtra AngularJS przed statkiemping.

Narzędzia AI przepisują ng-repeat jako blok przepływu sterowania i przenoszą filtry do potoków lub sygnałów. Ponieważ Angular nie ma wbudowanego orderBy ani filtra, przeglądaj ręcznie każde wygenerowane sortowanie i wyszukiwanie.

Podsumuj ten post następująco: