Tabelele sunt unul dintre elementele comune utilizate în HTML atunci când lucrați cu pagini web.
Tabelele în HTML sunt proiectate folosind eticheta HTML
Etichetă
- Aceasta este eticheta principală utilizată pentru afișarea tabelului.
- Această etichetă este utilizată pentru separarea rândurilor din tabel.
- Această etichetă este utilizată pentru afișarea datelor reale ale tabelului.
- Acesta este utilizat pentru datele antetului tabelului.
Folosind etichetele HTML disponibile mai sus împreună cu AngularJS, putem simplifica popularea datelor din tabel. Pe scurt, directiva ng-repeat este utilizată pentru completarea datelor din tabel.
Vom analiza cum să realizăm acest lucru în acest capitol. Vom analiza, de asemenea, modul în care putem folosi filtrele orderby și majuscule, împreună cu utilizarea atributului $ index pentru a afișa indexuri de tabel angular.
În acest tutorial, veți învăța-
Populați și afișați date într-un tabel
Filtru încorporat AngularJS
Sortați tabelul cu filtru OrderBy
Afișați tabelul cu filtru cu majuscule
Afișați indicele tabelului (indicele $)
Populați și afișați date într-un tabel
După cum am discutat în introducerea acestui capitol, baza pentru crearea structurii tabelelor într-o pagină HTML rămâne aceeași.
Structura tabelului este încă creată folosind etichetele HTML normale
,
,
și
. Cu toate acestea, datele sunt completate utilizând directiva ng-repeat în AngularJS.
Să aruncăm un exemplu simplu despre cum putem implementa tabele unghiulare.
În acest exemplu,
Vom crea un tabel unghiular care va avea subiecte de curs împreună cu descrierile lor.
Pasul 1) Vom adăuga mai întâi o etichetă „stil” pe pagina noastră HTML, astfel încât tabelul să poată fi afișat ca un tabel adecvat.
Eticheta de stil este adăugată la pagina HTML. Acesta este modul 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 o margine solidă pentru masa noastră unghiulară și
Al doilea este că ar trebui să existe o umplutură pentru datele noastre de tabel unghiular.
Pasul 2) Următorul pas este să scrieți codul pentru a genera tabelul și datele sale.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Explicatie cod:
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 utilizată ca date la afișarea tabelului. Variabila tutorial este apoi atribuită obiectului scop, astfel încât să poată fi accesată din vizualizarea noastră.
Acesta este primul pas în crearea unui tabel și folosim eticheta
.
Pentru fiecare rând de date, folosim „directiva ng-repeat”. Această directivă trece prin fiecare pereche cheie-valoare din obiectul tuto, rial scope, utilizând 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ă când rulați codul în browser.
Ieșire:
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 din AngularJS pentru a schimba modul în care datele sunt afișate în tabele. Am văzut deja filtre în acțiune într-un capitol anterior. Să facem o recapitulare rapidă a filtrelor înainte de a continua.
În Angular.JS filtrele sunt utilizate pentru a formata valoarea expresiei înainte ca aceasta să fie afișată utilizatorului. Un exemplu de filtru este filtrul „majuscule” care preia un șir de caractere și formatează șirul și afișează toate caracterele din șir ca majuscule.
Deci, în exemplul de mai jos, dacă valoarea variabilei „TutorialName” este „AngularJS”, ieșirea expresiei de mai jos va fi „ANGULARJS”.
{{TurotialName | majuscule }}
În această secțiune, vom analiza modul în care filtrele orderBy și majuscule pot fi utilizate mai detaliat în tabele.
Sortați tabelul cu filtru OrderBy
Acest filtru este utilizat pentru a sorta tabelul pe baza uneia dintre coloanele tabelului. În exemplul anterior, ieșirea pentru datele noastre din tabelul unghiular a apărut așa cum se arată mai jos.
Controlere
Controlere în acțiune
Modele
Modele și date obligatorii
Directivele
Flexibilitatea directivelor
Să vedem un exemplu despre modul în care putem folosi filtrul „orderBy” și sortăm datele tabelului unghiular folosind prima coloană din tabel.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Explicatie cod:
Folosim același cod pe care l-am folosit pentru crearea tabelului nostru, singura diferență de data aceasta este că folosim filtrul „orderBy” împreună cu directiva ng-repeat. În acest caz, spunem că vrem să ordonăm tabelul cu tasta „Nume”.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
Putem vedea că datele din tabelul unghiular au fost sortate conform datelor din prima coloană. În setul nostru de date, datele „Directivelor” provin din datele „Modele”, dar pentru că am aplicat filtrul orderBy, tabelele sunt sortate corespunzător.
Afișați tabelul cu filtru cu majuscule
De asemenea, putem folosi filtrul cu majuscule pentru a schimba datele din tabelul unghiular cu majuscule.
Să aruncăm o privire la un exemplu despre cum putem realiza acest lucru.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Explicatie cod:
Folosim același cod pe care l-am folosit pentru crearea tabelei noastre, singura diferență de această dată este că folosim filtrul cu 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ă când rulați codul în browser.
Ieșire:
Din ieșire,
Putem vedea că, folosind filtrul „majuscule”, toate datele din prima coloană sunt afișate cu caractere majuscule.
Afișați indicele tabelului (indicele $)
Pentru a afișa indexul tabelului, adăugați un
cu $ index.
Să aruncăm o privire la un exemplu despre cum putem realiza acest lucru.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Explicatie cod:
Folosim același cod ca și pentru crearea tabelei noastre, 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ă, utilizăm proprietatea „$ index” furnizată de AngularJS și apoi folosim operatorul +1 pentru a crește indexul pentru fiecare rând.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
Puteți vedea că a fost creată o coloană suplimentară. În această coloană, putem vedea indexurile create pentru fiecare rând.
Rezumat:
Structurile tabelelor sunt create folosind etichetele standard disponibile în HTML. Datele din tabel sunt completate 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 din majuscule.
Proprietatea „$ index” poate fi utilizată pentru a crea un index pentru tabel.
O problemă obișnuită întâlnită în timpul dezvoltării cu tabelele AngularJS.JS este implementarea seturilor de date mari, care conține peste 1000 de rânduri de date. Uneori, directiva ng-repeat poate deveni neacceptabilă și, prin urmare, întreaga pagină nu mai răspunde uneori. Într-un astfel de caz, este întotdeauna mai bine să aveți paginări în care rândurile de date să fie răspândite pe mai multe pagini.
