AngularJS Tablosu: orderBy ve Büyük Harf Filtresi ile Sıralama

By: James Hartman James Hartman
Hours Güncellenmiş

⚡ Akıllı Özet

AngularJS'de tablo sıralama, düzenleme ve metin biçimlendirme işlemleri, ng-repeat yönergesi ve bir filtre ifadesine dayanır. Bu sayfa, orderBy, uppercase, filter ve $index ifadelerinin düz bir HTML tablosunu nasıl canlı, veri odaklı bir tabloya dönüştürdüğünü göstermektedir.

  • 🧱 Yapısı: `table`, `tr`, `td` ve `th` etiketleri hala tabloyu oluşturuyor, bu nedenle AngularJS'ye özgü hiçbir işaretleme standart HTML'nin yerini almıyor.
  • 🔁 Nüfus: `ng-repeat` yönergesi, `scope` nesnesindeki bir diziyi dolaşır ve bulduğu her öğe için bir satır oluşturur.
  • ↕️ Sıralama: `orderBy` filtresi satırları herhangi bir anahtara göre sıralar ve `reverse` bayrağı isteğe bağlı olarak sıralama yönünü değiştirir.
  • 🔤 Biçimlendirme: Büyük harf filtresi, denetleyicideki temel verileri değiştirmeden tek bir sütunu büyük harfe dönüştürür.
  • 🔎 Aranıyor: ng-model girişine bağlı filtre, okuyucu yazarken görünür satırları daraltır.
  • 🔢 Numaralama: $index özelliği sıfır tabanlı bir sayaç sağlar, bu nedenle bir eklemek okunabilir bir satır numarası üretir.
  • ???? ölçek: Bin satırdan sonra, limitTo'yu sayfalama ile birlikte kullanın ve tracSayfanın yanıt vermesini sağlamak için k kullanılır.
Devamını Oku

AngularJS Tablosu

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

Tablolar içinde HTML 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. Ayrıca, AngularJS tablo indekslerini görüntülemek için `$index` özniteliğini kullanmanın yanı sıra `orderBy` ve büyük harf filtrelerini nasıl kullanabileceğimizi de inceleyeceğiz. İlk adım, işaretlemenin kendisidir.

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.
AngularJS tablolarını nasıl uygulayabileceğimize dair basit bir örneğe bakalım.
Bu örnekte,

AngularJS kullanarak, ders konularını ve açıklamalarını içeren bir tablo 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, AngularJS tablomuz için sağlam bir kenarlık olması gerekiyor ve
  • İkincisi, AngularJS tablo verilerimiz için dolgu (padding) eklenmelidir.

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

⚠️Uyarı: Bu ilan, yayınlandığı haliyle aynen yeniden üretilmiştir ve içindeki dört satırda hata bulunmaktadır. chrset yazım hataları charsetÜç AngularJS derlemesi aynı anda yükleniyor, bu da bir fazla demek. lib/bootstrap.js hem de lib/bootstrap.css Mevcut değiller. Saklayın. angular.min.js bir tek.

Code 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.DescriptAngularJS tablo verilerini görüntülemek için (ion) kullanılı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ı

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.

Ham veriler yalnızca başlangıç ​​noktasıdır, çünkü filtreler bu satırların nasıl sıralanacağını ve biçimlendirileceğini belirler.

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.

AngularJS'de filtreler, bir ifadenin değerini kullanıcıya gösterilmeden önce biçimlendirmek için kullanılır. Bir filtre örneği, bir dize çıktısını alan ve dizeyi biçimlendirerek dizedeki tüm karakterleri büyük harf olarak görüntüleyen 'uppercase' filtresidir.

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

{{ TutorialName | uppercase }}

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

Tablolarla Kullanılan Yaygın AngularJS Filtreleri

Aşağıdaki tabloda, ng-repeat ifadesi içinde en sık kullanılan filtreler karşılaştırılmıştır.

Filtrele Amaç Örnek E-posta
tarafından sipariş Satırları bir anahtara göre sıralar. | orderBy : 'Name'
filtre Eşleşen satırları korur. | filter : searchText
büyük harf Metni büyük harfle başlatır. | uppercase
küçük Metni aşağı kaydırır | lowercase
limitTo Kapak satır sayısı | limitTo : 25
para Para biçimleri | currency : '$'
tarih Tarih formatları | date : 'dd MMM yyyy'
numara Ondalık sayıları ayarlar | number : 2

Sıralama, okuyucuların ilk olarak istediği filtre olduğundan, orderBy filtresi daha sonra gelir.

Tabloyu OrderBy Filtresiyle Sırala

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

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

Şimdi, "orderBy" filtresini kullanarak AngularJS tablosundaki verileri tablonun ilk sütununa göre nasıl sıralayabileceğimize dair 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>

Code 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,

  • AngularJS tablosundaki verilerin ilk sütundaki verilere göre sıralandığını görebiliriz. Dizi, Denetleyiciler, Modeller, Yönergeler sırasıyla tanımlanmıştır, bu nedenle filtre uygulanmadığında satırlar bu sırayla görünür. Uygulama orderBy : 'Name' İsim değerlerini alfabetik olarak sıralar, bu da Yönergeleri Modellerin önüne geçirir ve Denetleyiciler, Yönergeler, Modeller sonucunu oluşturur.

Sırala Reverse ve Sütun Başlıklarından

`orderBy` filtresi ikinci bir argüman kabul eder. Bu argümanı geçirmek true Yönü tersine çevirir ve hem anahtarı hem de bu bayrağı kapsamda saklamak, okuyucunun bir başlığa tıklayarak tabloyu yeniden sıralamasına olanak tanır. orderBy referansı açıklamaktadır.

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

Sıralama, satırların sırasını değiştirir. Sonraki filtre, tek bir sütunun nasıl okunacağını değiştirir.

İLGİLİ MAKALELER

Büyük Harf Filtreli Gösterge Tablosu

AngularJS tablosundaki verileri büyük harfe dönüştürmek 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>

Code 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.

Sütun biçimlendirme faydalıdır ve okuyucular genellikle sütunun yanında satır numarasını görmek isterler.

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>

Code 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.

Ekrana üç satır sığar. Gerçekçi bir veri kümesi sığmaz, bu nedenle okuyucuların onu arayabilmeleri için bir yönteme ihtiyaçları vardır.

AngularJS Tablo Verilerini Filtreleme ve Arama Nasıl Yapılır?

AngularJS, adlı bir filtre içerir. filter`ng-repeat`'ten sonra yerleştirildiğinde, dizideki her öğeyi bir değerle karşılaştırır ve yalnızca eşleşen satırları tutar. Bu değeri `ng-model` ile bir metin kutusuna bağlayın ve okuyucu yazarken tablo, herhangi bir olay işleyici veya denetleyici kodu olmadan kendiliğinden daralır.

Canlı Arama Ekle Box

Tablonun üstüne bir giriş alanı ekleyin ve diziyi filtre üzerinden geçirin. İkisi aynı kapsam özelliğini paylaştığı için AngularJS, her tuş vuruşunda ifadeyi yeniden değerlendirir.

<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 Açıklama:

  1. Giriş alanına yazılan her şey yazdırılır. searchText dürbün üzerinde.
  2. filter : searchText Adı veya Description, büyük/küçük harf duyarlılığı olmaksızın bu alt dizeyi içerir.
  3. Bunun yerine tek bir sütunda arama yapmak için bir nesne geçirin: filter : {Name : searchText}.
  4. Filtre zinciri, yani | filter : searchText | orderBy : 'Name' Önce arama yapar, sonra hayatta kalanları ayırır.

Büyük Tabloları Duyarlı Tutun

AngularJS tablolarıyla geliştirme sırasında karşılaşılan yaygın sorunlardan biri, bin veya daha fazla satır içeren büyük veri kümeleridir. ng-tekrar Bu yönerge, her satır için bir kapsam ve bir izleyici oluşturur, böylece sayfa yanıt vermeyi durdurabilir. Bunun yerine satırları sayfalara dağıtın ve ekleyin. track by Bu nedenle mevcut satırlar yeniden oluşturulmak yerine tekrar kullanılır.

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

SSS

`ng-repeat` her satır için benzersiz bir anahtar gerektirir. İki özdeş değer, yinelenen dosyalar hatasına neden olur. `distribution` özelliğini ekleyin veya şunu yazın: track, $index'e göre hesaplanır, böylece satırın konumu değer yerine anahtar olur.

Evet. 'OrderBy' gibi bir anahtar dizisi geçirin: ['Name','DescriptAngularJS, önce ilk anahtara göre sıralama yapar, ardından ikinci anahtarla eşitlik durumunu çözer. Yalnızca o anahtarı tersine çevirmek için o anahtarın başına eksi işareti ekleyin.

Her `ng-repeat` satırı `$even` ve `$odd` boolean değerlerini gösterir. Bunlardan birini `ng-class` veya `ng-if` ile bağlayarak arka plan rengi uygulayabilir ve tabloda herhangi bir ek CSS seçiciye gerek kalmadan çizgili satırlar elde edebilirsiniz.

Asistanlar gibi GitHub Yardımcı Pilotu Hızlı bir şekilde ng-repeat işaretlemesi oluşturuyorlar, ancak yine de komut dosyası yolları uyduruyorlar ve nitelikleri yanlış yazıyorlar. Her öneriyi aşağıdakine göre doğrulayın. AngularJS filtre referansı gemiden önceping.

Yapay zeka araçları, ng-repeat'i bir kontrol akışı bloğu olarak yeniden yazıyor ve filtreleri borulara veya sinyallere taşıyor. Çünkü Açısal Dahili bir `orderBy` veya `filter` borusu bulunmadığından, oluşturulan her sıralama ve arama işlemi elle incelenmelidir.

Bu yazıyı şu şekilde özetleyin: