Tabel AngularJS: sortare, ordonare și filtru majuscule [Exemple]

Tabelele sunt unul dintre elementele comune folosite în HTML atunci când lucrați cu pagini web.

Tabelele în HTML sunt proiectate folosind eticheta HTML

tag – Aceasta este eticheta principală utilizată pentru afișarea tabelului.
– Această etichetă este folosită pentru a segrega rândurile din tabel.
– Această etichetă este utilizată pentru afișarea datelor reale din tabel.
– Acesta este utilizat pentru datele antetului tabelului.

Folosind etichetele HTML disponibile de mai sus împreună cu AngularJS, putem facilita completarea datelor din tabel. Pe scurt, directiva ng-repeat este folosită pentru a completa datele din tabel.

Vom vedea cum putem realiza acest lucru în acest capitol. Ne vom uita, de asemenea, la modul în care putem folosi filtrele orderby și majuscule împreună cu utilizarea atributului $index pentru a afișa indecșii tabelului unghiular.

Populați și afișați datele într-un tabel

După cum am discutat în introducerea acestui capitol, baza pentru crearea structurii tabelului într-o pagină HTML rămâne aceeași.

Structura tabelului este încă creată folosind etichetele HTML normale ale , , și . Cu toate acestea, datele sunt populate folosind directiva ng-repeat în AngularJS.
Să ne uităm la un exemplu simplu despre cum putem implementa tabelele Angular.
În acest exemplu,

Vom crea un tabel Angular care va avea subiecte ale cursului împreună cu descrierile acestora.

Pas 1) Mai întâi vom adăuga o etichetă „stil” la pagina noastră HTML, astfel încât tabelul să poată fi afișat ca un tabel adecvat.

Eticheta de stil este adăugată în pagina HTML. Aceasta este modalitatea standard de a adăuga orice atribute de formatare care sunt necesare pentru elementele HTML.
Adăugăm două valori de stil la tabelul nostru.

Una este că ar trebui să existe un chenar solid pentru masa noastră Angular și
În al doilea rând, ar trebui să existe o umplutură pentru datele noastre din tabelul Angular.

Pas 2) Următorul pas este să scrieți codul pentru a genera tabelul și datele acestuia.

<!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>

Explicarea codului

Mai întâi creăm o variabilă numită „tutorial” și îi atribuim câteva perechi cheie-valoare într-un singur pas. Fiecare pereche cheie-valoare va fi folosită ca date la afișarea tabelului. Variabila tutorial este apoi atribuită obiectului scope, astfel încât să poată fi accesată din vizualizarea noastră.
Acesta este primul pas în crearea unui tabel și folosim etichetă.
Pentru fiecare rând de date, folosim „directiva ng-repeat”. Această directivă parcurge fiecare pereche cheie-valoare din obiectul domeniului tutorial folosind variabila ptutor.
În cele din urmă, folosim eticheta împreună cu perechile cheie-valoare (ptutor.Name și ptutor.Description) pentru a afișa datele tabelului unghiular.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

producție

Din rezultatul de mai sus,

Putem vedea că tabelul este afișat corect cu datele din matricea de perechi cheie-valoare definite în controler.
Datele din tabel au fost generate prin parcurgerea fiecărei perechi cheie-valoare utilizând „directiva ng-repeat”.

Filtru încorporat AngularJS

Este foarte obișnuit să folosiți filtrele încorporate în AngularJS pentru a schimba modul în care datele sunt afișate în tabele. Am văzut deja filtrele în acțiune într-un capitol anterior. Să facem o recapitulare rapidă a filtrelor înainte de a continua.

În Angular.JS, filtrele sunt folosite pentru a formata valoarea expresiei înainte ca aceasta să fie afișată utilizatorului. Un exemplu de filtru este filtrul „majuscule” care preia o ieșire de șir și formatează șirul și afișează toate caracterele din șir ca majuscule.

Deci, în exemplul de mai jos, dacă valoarea variabilei „TutorialName” este „AngularJS”, rezultatul expresiei de mai jos va fi „ANGULARJS”.

În această secțiune, ne vom uita la modul în care filtrele orderBy și majuscule pot fi utilizate în tabele mai detaliat.

Sortați tabelul cu filtrul OrderBy

Acest filtru este folosit pentru a sorta tabelul pe baza uneia dintre coloanele tabelului. În exemplul anterior, rezultatul pentru datele din tabelul unghiular a apărut așa cum se arată mai jos.

Controlere	Controlorii în acțiune
modele	Modele și date obligatorii
Directivele	Flexibilitatea directivelor

Să ne uităm la un exemplu, despre cum putem folosi filtrul „orderBy” și sortăm datele tabelului Angular folosind prima coloană din tabel.

<!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>

Explicarea codului

Folosim același cod ca și pentru crearea tabelului nostru, singura diferență de această dată este că folosim filtrul „orderBy” împreună cu directiva ng-repeat. În acest caz, spunem că vrem să ordonăm tabelul după cheia „Nume”.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

producție

Din ieșire,

Putem vedea că datele din tabelul Angular au fost sortate conform datelor din prima coloană. În setul nostru de date, datele „Directive” provin din datele „Modele”, dar deoarece am aplicat filtrul orderBy, tabelele sunt sortate în consecință.

Afișează tabel cu filtru majuscule

De asemenea, putem folosi filtrul cu majuscule pentru a schimba datele din tabelul Angular în majuscule.

Să aruncăm o privire la un exemplu despre cum putem realiza acest lucru.

<!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>

Explicarea codului

Folosim același cod ca și pentru crearea tabelului nostru, singura diferență de această dată este că folosim filtrul majuscule. Folosim acest filtru împreună cu „ptutor.Name”, astfel încât tot textul din prima coloană să fie afișat cu majuscule.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

producție

Din ieșire,

Putem vedea că, folosind filtrul „majuscule”, toate datele din prima coloană sunt afișate cu caractere majuscule.

Afișați indexul tabelului ($index)

Pentru a afișa indexul tabelului, adăugați a cu $index.

Să aruncăm o privire la un exemplu despre cum putem realiza acest lucru.

<!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>

Explicarea codului

Folosim același cod ca și pentru crearea tabelului nostru, singura diferență de această dată este că adăugăm un rând suplimentar la tabelul nostru pentru a afișa coloana index. În această coloană suplimentară, folosim proprietatea „$index”. furnizate de AngularJS și apoi folosind operatorul +1 pentru a incrementa indexul pentru fiecare rând.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

producție

Din ieșire,

Puteți vedea că a fost creată o coloană suplimentară. În această coloană, putem vedea indecșii creați pentru fiecare rând.

Rezumat

Structurile tabelelor sunt create folosind etichetele standard disponibile în interior HTML. Datele din tabel sunt populate folosind directiva „ng-repeat”.
Filtrul orderBy poate fi folosit pentru a sorta tabelul pe baza oricărei coloane din tabel.
Filtrul cu majuscule poate fi utilizat pentru a afișa datele în orice coloană bazată pe text în majuscule.
Proprietatea „$index” poate fi folosită pentru a crea un index pentru tabel.
O problemă comună întâlnită în timpul dezvoltării cu tabelele AngularJS.JS este implementarea unor seturi de date mari care au peste 1000 de rânduri de date. Uneori, cel ng-repetă directiva poate deveni neresponsive și, prin urmare, întreaga pagină devine uneori fără răspuns. Într-un astfel de caz, este întotdeauna mai bine să aveți o paginare în care rândurile de date sunt răspândite pe mai multe pagini.

S-ar putea sa-ti placa:

Populați și afișați datele într-un tabel

Explicarea codului

producție

ARTICOLE SIMILARE

Filtru încorporat AngularJS

Sortați tabelul cu filtrul OrderBy

Explicarea codului

producție

Afișează tabel cu filtru majuscule

Explicarea codului

producție

Afișați indexul tabelului ($index)

Explicarea codului

producție

Rezumat