AngularJS Tablosu: Sıralama, Sıralamaya Göre ve Büyük Harf Filtresi [Örnekler]

By: James Hartman James Hartman
Hours Güncellenmiş

Tablolar, web sayfalarıyla çalışırken HTML'de kullanılan ortak öğelerden biridir.

HTML'deki tablolar HTML etiketi kullanılarak tasarlanmıştır

  1. tag – Bu, tabloyu görüntülemek için kullanılan ana etikettir.
  2. – Bu etiket tablo içindeki satırları ayırmak için kullanılır.
  3. – Bu etiket gerçek tablo verilerini görüntülemek için kullanılır.
  4. – Bu, tablo başlığı verileri için kullanılır.

Yukarıdaki mevcut HTML etiketlerini birlikte kullanma angularjs, tablo verilerini doldurmayı kolaylaştırabiliriz. Kısaca tablo verilerini doldurmak için ng-repeat direktifi kullanılır.

Bu bölümde bunu nasıl başaracağımıza bakacağız. Angular tablo indekslerini görüntülemek için $index özelliğini kullanmanın yanı sıra, orderby ve büyük harf filtrelerini nasıl kullanabileceğimize de bakacağız.

Verileri Tabloda Doldurma ve Görüntüleme

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 normal HTML etiketleri kullanılarak oluşturulmaktadır. , , Ve . Ancak veriler AngularJS'deki ng-repeat yönergesi kullanılarak doldurulur.
Angular tablolarını nasıl uygulayabileceğimize dair basit bir örneğe bakalım.
Bu örnekte,

Ders konularının ve açıklamalarının yer aldığı bir Angular tablosu oluşturacağız.

) 1 Adım Tablonun düzgün bir tablo olarak görüntülenebilmesi için öncelikle HTML sayfamıza bir “style” etiketi ekleyeceğiz.

Verileri Tabloda Doldurma ve Görüntüleme

  1. Stil etiketi HTML sayfasına eklenir. Bu, HTML öğeleri için gerekli olan biçimlendirme niteliklerini eklemenin standart yoludur.
  2. Tablomuza iki stil değeri ekliyoruz.
  • Birincisi, Angular tablomuz için sağlam bir sınır olması gerektiği ve
  • İkincisi, Angular tablo verilerimiz için dolgu yapılması gerektiğidir.

) 2 Adım Bir sonraki adım, tabloyu ve verileri oluşturmak için kodu yazmaktır.

Verileri Tabloda Doldurma ve Görüntüleme

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

Kod Açıklama

  1. Öncelikle “öğretici” adı verilen bir değişken oluşturuyoruz ve ona tek adımda bazı anahtar/değer çiftlerini atadık. Tablo görüntülenirken her anahtar/değer çifti veri olarak kullanılacaktır. Öğretici değişken daha sonra kapsam nesnesine atanır, böylece ona görünümümüzden erişilebilir.
  2. Bu bir tablo oluşturmanın ilk adımıdır ve biz etiket.
  3. Her veri satırı için “ng-repeat direktifini” kullanıyoruz. Bu yönerge, ptutor değişkenini kullanarak eğitim kapsamı nesnesindeki her anahtar/değer çiftinden geçer.
  4. Son olarak şunu kullanıyoruz: anahtar/değer çiftleriyle birlikte etiketleyin (ptutor.Name ve ptutor.Description) Açısal tablo verilerini görüntülemek için.

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ı

Verileri Tabloda Doldurma ve Görüntüleme

Yukarıdaki çıktıdan,

  • Denetleyicide tanımlanan anahtar-değer çiftleri dizisinden gelen verilerle tablonun düzgün şekilde görüntülendiğini görebiliriz.
  • Tablo verileri, “ng-repeat direktifi” kullanılarak anahtar/değer çiftlerinin her biri üzerinden geçilerek oluşturuldu.

İLGİLİ MAKALELER

AngularJS dahili Filtresi

Verilerin tablolarda görüntülenme şeklini değiştirmek için AngularJS içindeki dahili filtrelerin kullanılması çok yaygındır. Daha önceki bir bölümde filtreleri çalışırken görmüştük. Devam etmeden önce filtrelerin kısa bir özetini yapalım.

Angular.JS'de filtreler, ifadenin değerini kullanıcıya görüntülenmeden önce biçimlendirmek için 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.

Yani aşağıdaki örnekte, 'TutorialName' değişkeninin değeri 'AngularJS' ise, aşağıdaki ifadenin çıktısı 'ANGULARJS' olacaktır.

{{ TurotialName | uppercase }}

Bu bölümde orderBy ve büyük harf filtrelerinin tablolarda nasıl kullanılabileceğine daha detaylı bakacağız.

Tabloyu OrderBy Filtresiyle Sırala

Bu filtre, tabloyu tablo sütunlarından birine göre sıralamak için kullanılır. Önceki örnekte Angular tablo verilerimizin çıktısı aşağıda gösterildiği gibi ortaya çıktı.

Kontrolörler Kontrolörler iş başında
Modeller Modeller ve bağlama verileri
talimatlar Direktiflerin Esnekliği

“orderBy” filtresini nasıl kullanabileceğimizi ve Angular tablo verilerini tablodaki ilk sütunu kullanarak nasıl sıralayabileceğimizi gösteren bir örneğe bakalım.

Tabloyu OrderBy Filtresiyle Sırala

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

Kod Açıklama

  1. Tablomuzu oluştururken kullandığımız kodun aynısını kullanıyoruz, tek fark bu sefer ng-repeat direktifiyle birlikte “orderBy” filtresini de kullanıyor olmamız. Bu durumda “Name” tuşu ile tabloyu 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ı

Tabloyu OrderBy Filtresiyle Sırala

Çıktıdan,

  • Angular tablosundaki verilerin ilk sütundaki verilere göre sıralandığını görebiliriz. Veri setimizde “Direktifler” verileri “Modeller” verilerinden gelir ancak orderBy filtresini uyguladığımız için tablolar buna göre sıralanır.

Büyük Harf Filtreli Gösterge Tablosu

Angular tablosundaki 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.

Büyük Harf Filtreli Gösterge Tablosu

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

Kod Açıklama

  1. Tablomuzu oluştururken kullandığımız kodun aynısını kullanıyoruz, bu seferki tek fark büyük harf filtresini kullanıyor olmamız. İlk sütundaki metnin tamamının büyük harfle görüntülenmesi için bu filtreyi “ptutor.Name” ile birlikte 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ı

Büyük Harf Filtreli Gösterge Tablosu

Çıktıdan,

  • “Büyük harf” filtresi kullanıldığında ilk sütundaki verilerin tamamının büyük harflerle görüntülendiğini görebiliriz.

Tablo Dizinini Görüntüle ($index)

Tablo dizinini görüntülemek için bir ekleyin $ endeksi ile.

Bunu nasıl başarabileceğimize dair bir örneğe bakalım.

Tablo Dizinini Görüntüle

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

Kod Açıklama

  1. Tablomuzu oluştururken kullandığımız kodun aynısını kullanıyoruz, bu sefer tek fark tablomuza indeks sütununu gösterecek şekilde fazladan bir satır ekliyor olmamız. Bu ek sütunda “$index” özelliğini kullanıyoruz. AngularJS tarafından sağlanır ve ardından her satırın indeksini artırmak için +1 operatörünü kullanır.

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ı

Tablo Dizinini Görüntüle

Çı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ı, içinde mevcut olan standart etiketler kullanılarak oluşturulur. HTML. Tablodaki veriler “ng-repeat” direktifi kullanılarak doldurulur.
  • OrderBy filtresi, tabloyu, tablo içindeki herhangi bir sütuna göre sıralamak için kullanılabilir.
  • Büyük harf filtresi, herhangi bir metin tabanlı sütundaki verileri büyük harfle görüntülemek için kullanılabilir.
  • Tabloya indeks oluşturmak için “$index” özelliği kullanılabilir.
  • AngularJS.JS tablolarıyla geliştirme sırasında karşılaşılan yaygın sorunlardan biri, 1000'den fazla veri satırına sahip büyük veri kümelerinin uygulanmasıdır. Bazen ng-tekrar yönerge yanıt vermeyebilir ve bu nedenle zaman zaman sayfanın tamamı yanıt vermeyebilir. Böyle bir durumda, veri satırlarının birden fazla sayfaya yayıldığı sayfalandırmaya sahip olmak her zaman daha iyidir.