Tablolar, HTML'de web sayfalarıyla çalışırken kullanılan yaygın öğelerden biridir.
HTML'deki tablolar HTML etiketi kullanılarak tasarlanmıştır
etiketi - Bu, tabloyu görüntülemek için kullanılan ana etikettir.
- Bu etiket, tablo içindeki satırları ayırmak için kullanılır.
- Bu etiket, gerçek tablo verilerini görüntülemek için kullanılır.
- Bu, tablo başlığı verileri için kullanılır.
AngularJS ile birlikte yukarıdaki mevcut HTML etiketlerini kullanarak tablo verilerini doldurmayı kolaylaştırabiliriz. Kısaca ng-tekrar direktifi tablo verilerini doldurmak için kullanılır.
Bu bölümde bunu nasıl başaracağımıza bakacağız. Ayrıca, Angular tablo dizinlerini görüntülemek için $ index özelliğini kullanmanın yanı sıra sıralı ve büyük harfli filtreleri nasıl kullanabileceğimize de bakacağız.
Bu eğitimde öğreneceksiniz-
Bir Tablodaki Verileri Doldurun ve Gösterin
AngularJS dahili Filtre
Tabloyu Sırala Filtreye Göre Sırala
Büyük Harf Filtreli Ekran Tablosu
Tablo Endeksini Görüntüle ($ endeksi)
Bir Tablodaki Verileri Doldurun ve Gösterin
Bu bölümün girişinde tartıştığımız gibi, bir HTML sayfasında tablo yapısını oluşturmanın temeli aynı kalır.
Tablonun yapısı hala
,
,
ve
normal HTML etiketleri kullanılarak oluşturulur. Bununla birlikte, veriler AngularJS'deki ng-tekrar yönergesi kullanılarak doldurulur.
Açısal tabloları nasıl uygulayabileceğimize dair basit bir örneğe bakalım.
Bu örnekte,
Ders konularının açıklamalarıyla birlikte olacağı bir Açısal tablo oluşturacağız.
Adım 1) İlk olarak, tablonun uygun bir tablo olarak görüntülenebilmesi için HTML sayfamıza bir "stil" etiketi ekleyeceğiz.
Stil etiketi HTML sayfasına eklenir. Bu, HTML öğeleri için gerekli olan biçimlendirme niteliklerini eklemenin standart yoludur.
Tablomuza iki stil değeri ekliyoruz.
Birincisi, Açısal tablomuz için sağlam bir sınır olmalı ve
İkincisi, Açısal tablo verilerimiz için yerine dolgu yapılması gerektiğidir.
Adım 2) Sonraki adım, tabloyu ve verilerini oluşturmak için kodu yazmaktır.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Kod Açıklaması:
İlk olarak "öğretici" adlı bir değişken oluşturuyoruz ve ona bir adımda bazı anahtar-değer çiftleri atıyoruz. Tablo görüntülenirken her bir anahtar / değer çifti veri olarak kullanılacaktır. Eğitim değişkeni daha sonra, bizim görüşümüzden erişilebilmesi için kapsam nesnesine atanır.
Bu, bir tablo oluşturmanın ilk adımıdır ve
etiketini kullanıyoruz.
Her veri satırı için "ng-tekrar yönergesini" kullanıyoruz. Bu yönerge, ptutor değişkenini kullanarak tuto, rial kapsam nesnesindeki her bir anahtar-değer çiftinden geçer.
Son olarak, Angular tablo verilerini görüntülemek için anahtar-değer çiftleriyle (ptutor.Name ve ptutor.Description) birlikte
etiketini kullanıyoruz.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Yukarıdaki çıktıdan,
Denetleyicide tanımlanan anahtar-değer çiftleri dizisindeki verilerle tablonun düzgün görüntülendiğini görebiliriz.
Tablo verileri, "ng-tekrar yönergesi" kullanılarak anahtar-değer çiftlerinin her biri üzerinden geçilerek oluşturulmuştur.
AngularJS dahili Filtre
Verilerin tablolarda görüntülenme şeklini değiştirmek için AngularJS içindeki dahili filtreleri kullanmak çok yaygındır. Daha önceki bir bölümde filtrelerin iş başında olduğunu görmüştük. Devam etmeden önce filtrelerin hızlı bir özetini alalım.
Angular.JS'de, kullanıcıya görüntülenmeden önce ifadenin değerini biçimlendirmek için filtreler kullanılır. Bir filtre örneği, bir dize çıktısını alan ve dizeyi biçimlendiren ve dizedeki tüm karakterleri büyük harf olarak görüntüleyen 'büyük harf' filtresidir.
Dolayısıyla aşağıdaki örnekte, 'EğitimAdı' değişkeninin değeri 'AngularJS' ise, aşağıdaki ifadenin çıktısı 'ANGULARJS' olacaktır.
{{TurotialName | büyük harf}}
Bu bölümde orderBy ve büyük harf filtrelerinin tablolarda nasıl kullanılabileceğine daha detaylı bakacağız.
Tabloyu Sırala Filtreye Göre Sırala
Bu filtre, tabloyu tablo sütunlarından birine göre sıralamak için kullanılır. Önceki örnekte, Açısal tablo verilerimizin çıktısı aşağıda gösterildiği gibi göründü.
Kontrolörler
Kontrolörler iş başında
Modeller
Modeller ve bağlama verileri
Direktifler
Direktiflerin Esnekliği
"OrderBy" filtresini nasıl kullanabileceğimize ve tablodaki ilk sütunu kullanarak Angular tablo verilerini nasıl sıralayabileceğimize dair bir örneğe bakalım.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Kod Açıklaması:
Tablomuzu oluşturmak için kullandığımızla aynı kodu kullanıyoruz, bu sefer tek fark, ng-tekrar yönergesi ile birlikte "orderBy" filtresini kullanmamızdır. Bu durumda tabloyu "İsim" anahtarıyla sıralamak istediğimizi söylüyoruz.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan
Angular tablosundaki verilerin ilk sütundaki verilere göre sıralandığını görebiliriz. Veri kümemizde, "Yönergeler" verileri "Modeller" verilerinden gelir, ancak orderBy filtresini uyguladığımız için tablolar buna göre sıralanır.
Büyük Harf Filtreli Ekran Tablosu
Açısal tablodaki verileri büyük harfe çevirmek için büyük harf filtresini de kullanabiliriz.
Bunu nasıl başarabileceğimize dair bir örneğe bakalım.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Kod Açıklaması:
Tablomuzu oluşturmak için kullandığımız aynı kodu kullanıyoruz, bu sefer tek fark büyük harf filtresini kullanmamızdır. Bu filtreyi "ptutor.Name" ile birlikte kullanıyoruz, böylece ilk sütundaki tüm metinler büyük harfle görüntülenecektir.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan
"Büyük harf" filtresini kullanarak, ilk sütundaki tüm verilerin büyük harf karakterlerle görüntülendiğini görebiliriz.
Tablo Endeksini Görüntüle ($ endeksi)
Tablo indeksini görüntülemek için $ index ile bir
ekleyin.
Bunu nasıl başarabileceğimize dair bir örneğe bakalım.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Kod Açıklaması:
Tablomuzu oluşturmak için yaptığımızla aynı kodu kullanıyoruz, bu sefer tek fark, indeks sütununu görüntülemek için tablomuza fazladan bir satır eklememizdir.
Bu ek sütunda, AngularJS tarafından sağlanan "$ index" özelliğini kullanıyoruz ve ardından her satır için dizini artırmak için +1 operatörünü kullanıyoruz.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan
Ek bir sütunun oluşturulduğunu görebilirsiniz. Bu sütunda, her satır için oluşturulan indeksleri görebiliriz.
Özet:
Tablo yapıları, HTML içinde bulunan standart etiketler kullanılarak oluşturulur. Tablodaki veriler "ng-tekrar" yönergesi kullanılarak doldurulur.
OrderBy filtresi, tabloyu tablodaki herhangi bir sütuna göre sıralamak için kullanılabilir.
Büyük harf filtresi, verileri herhangi bir metin tabanlı sütunda büyük harfle görüntülemek için kullanılabilir.
"$ İndex" özelliği, tablo için bir dizin oluşturmak için kullanılabilir.
AngularJS.JS tablolarıyla geliştirme sırasında karşılaşılan yaygın bir sorun, 1000'den fazla veri satırı içeren büyük veri kümelerinin uygulanmasıdır. Bazen ng-tekrar yönergesi yanıt vermeyebilir ve bu nedenle tüm sayfa zaman zaman yanıt vermez hale gelebilir. Böyle bir durumda, veri satırlarının birden çok sayfaya yayıldığı sayfalandırmaya sahip olmak her zaman daha iyidir.
