Örnekle AngularJS ng-tekrar Direktifi

By: James Hartman James Hartman
Hours Güncellenmiş

⚡ Akıllı Özet

AngularJS'deki `ng-repeat` yönergesi, denetleyici kapsamında tanımlanan bir koleksiyondaki her öğe için bir öğenin bir kopyasını oluşturur. Manuel bir döngü yazmaya gerek kalmadan bir diziyi listeye, tabloya veya herhangi bir tekrarlayan işaretlemeye dönüştürür.

  • 🔁 Temel Davranış: `ng-repeat`, ana öğesini her öğe için bir kez kopyalar; bu nedenle yönerge, tekrarlanan öğeye ait olmalıdır, kapsayıcısına değil.
  • ???? ️ Döngü Değişkeni: "In" kelimesinden önceki isim, o klonun içindeki mevcut öğe için yerel bir takma ad haline gelir.
  • 🧬 Çocuk Kapsamı: Her yineleme kendi alt kapsamını alır; bu nedenle döngü içinde bir temel veri türüne değer atamak üst öğeye ulaşmaz.
  • 🔑 Kimlik Tracking: A track by ifadesi, AngularJS'ye öğeleri nasıl tanımlayacağını söyler ve bir koleksiyon tekrarlanan değerler içerdiğinde gereklidir.
  • 🔢 Dahili Yerel Bileşenler: $index, $first ve $last gibi özellikler, numaralandırma ve biçimlendirme için her yineleme içinde kullanılabilir.
  • ⚠️ Destek Durumu: AngularJS'in kullanım ömrü 31 Aralık 2021'de sona erdi ve artık güvenlik yamaları almıyor.
Devamını Oku

AngularJS ng-repeat Yönergesi

AngularJS'de ng-repeat Yönergesi

MKS ng-tekrar Direktifler AngularJS'de `ng-repeat`, denetleyicide tanımlanan tekrarlayan değerleri görüntülemek için kullanılır. Bazen görünümde bir öğe listesi göstermemiz gerekir ve `ng-repeat`, denetleyicide tanımlanan bir listeyi görünüm sayfasına yansıtır.

⚠️ Destek bildirimi: AngularJS'ye ulaşıldı 31 Aralık 2021 tarihinde yaşamının sonuna ulaştı. ve daha fazla yama veya güvenlik düzeltmesi almaz. Aşağıdaki yönerge, mevcut AngularJS 1.x uygulamalarının bakımı için geçerliliğini korur; modern uygulamalarda ise durum farklıdır. Açısal eşdeğeri şudur: *ngFor yapısal yönerge.

AngularJS ng-tekrar Direktifi Örneği

AngularJS'de ng-repeat yönergesinin bir örneğine bakalım:

AngularJS'de ng-repeat Yönergesi

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
    <h1>Topics</h1>
    <ul>
        <li ng-repeat="tpname in TopicNames">
            {{tpname.name}}
        </li>
    </ul>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.TopicNames = [
            { name: "What controllers do from Angular's perspective" },
            { name: "Controller Methods" },
            { name: "Building a basic controller" }
        ];
    });
</script>

</body>
</html>

Code Açıklama:

  1. içinde kontrolörÖncelikle görünümde gösterilecek liste öğelerinin dizisini tanımlıyoruz. Burada, adlı bir dizi tanımlıyoruz. TopicNames Her biri isim-değer çiftinden oluşan üç öğe içerir.
  2. Dizi doğrudan atanır. $scope.TopicNamesBu sayede, bu denetleyiciye bağlı görünüm için kullanılabilir hale gelir.
  3. HTML etiketleri <ul> (sıralanmamış liste) ve <li> (Liste öğesi) öğeleri görüntüler. ng-repeat yönergesi dizideki her bir öğe üzerinde yineleme yapar ve tpname , mevcut öğeyi tutan yerel değişkendir, dolayısıyla {{tpname.name}} Ad özelliğini yazdırır.

⚠️ Düzeltme: Orijinal açıklamada dizinin "bir üye değişkenine eklendiği" belirtilmişti. topicsKodda böyle bir değişken mevcut değil; dizi doğrudan atanıyor. $scope.TopicNamesBu, görünümün atıfta bulunduğu isimdir. Buraya ikinci bir isim eklemek, listenin boş kalmasının yaygın bir nedenidir.

Kod başarıyla yürütüldüğünde, tarayıcıda aşağıdaki çıktı görüntülenir.

AngularJS'de ng-repeat Yönergesi

AngularJS Çoklu Denetleyiciler

Daha önce, tek bir metodun hem toplama hem de çıkarma işlemlerini ele aldığı tek bir denetleyici görmüştük.tracSayıların işlenmesi yerine, mantığı daha temiz bir şekilde ayırmak için birden fazla denetleyici kullanabilirsiniz. Örneğin, bir denetleyici sayılar üzerinde çalışırken, diğeri dizeler üzerinde çalışabilir.

AngularJS uygulamasında birden fazla denetleyici tanımlama örneğine bakalım.

AngularJS Çoklu Denetleyiciler

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp">
    <div ng-controller="firstcontroller">
        <div ng-controller="secondcontroller">
            {{lname}}
        </div>
    </div>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('firstcontroller', function($scope) {
        $scope.pname = "firstcontroller";
    });

    app.controller('secondcontroller', function($scope) {
        $scope.lname = "secondcontroller";
    });
</script>

</body>
</html>

Code Açıklama:

  1. İki kontrolör tanımlanmıştır, firstcontroller hem de secondcontrollerHer biri kendi değişkenine bir bağlamaktadır. kapsam: pname ilkinde, lname saniyede.
  2. Bu görünümde, ikinci denetleyici birincisinin içine yerleştirilmiştir ve ifade şu şekildedir: lname İç kapsamdan. Çünkü iç içe yerleştirilmiş bir denetleyici, üst öğesinden miras alır, {{pname}} Aynı sorun burada da çözülür: Miras aşağıya doğru akar, asla yukarıya doğru değil.

Kod başarıyla yürütülürse, metin ikinci denetleyici görüntülenir.

AngularJS Çoklu Denetleyiciler

İLGİLİ MAKALELER

Nasıl Kullanılır? track, ng-tekrarıyla

ng-repeat komutunun en sık karşılaşılan hatası şudur: Duplicates in a repeater are not allowedBir koleksiyon aynı değeri iki kez içerdiği anda ortaya çıkar ve listenin tamamen görüntülenmesini durdurur.

Sebep kimliktir. tracAngularJS, her öğe için sabit bir anahtara ihtiyaç duyar, böylece her özetleme işleminde DOM düğümlerini yeniden oluşturmak yerine yeniden kullanabilir. Varsayılan olarak, öğenin değerinin kendisini kullanır, bu nedenle iki özdeş değer çakışır.

<!-- Fails: the value 2 appears twice -->
<li ng-repeat="n in [1, 2, 2, 3]">{{n}}</li>

<!-- Works: position is unique even when values repeat -->
<li ng-repeat="n in [1, 2, 2, 3] track by $index">{{n}}</li>

<!-- Best for records from a server: track by a real identifier -->
<li ng-repeat="topic in TopicNames track by topic.id">{{topic.name}}</li>

İki form arasında seçim yapmak, ilk bakışta göründüğünden daha önemlidir. Tracking by $index Bu yöntem her zaman hatayı düzeltir çünkü bir konum tanım gereği benzersizdir, ancak her DOM düğümünü bir kayda değil, bir yuvaya bağlar. Koleksiyonu yeniden sıralamak veya filtrelemek daha sonra yanlış düğümleri yeniden kullanır ve bu da giriş alanlarının boş kalması şeklinde kendini gösterir.ping Önceki satırın metni.

Tracking gerçek bir tanımlayıcı ile, örneğin topic.id AngularJS bunu tamamen önler. Her kaydı hareket ettikçe takip edebilen AngularJS, mevcut düğümleri yok edip yeniden oluşturmak yerine yeniden sıralar. Uzun listelerde bu, belirgin şekilde daha hızlıdır, çünkü yeniden oluşturma yalnızca gerçekten değişen satırlara dokunur. $index Yalnızca sıralaması asla değişmeyen, düz değerlerden oluşan diziler için geçerlidir.

ng-repeat içinde bulunan özel özellikler

`ng-repeat`'in her yinelemesi, kendi alt kapsamı üzerinde birkaç salt okunur özellik sunar. Bu özellikler, denetleyiciye herhangi bir ek durum eklemeden, numaralandırma, alternatif stiller ve ayırıcılar da dahil olmak üzere, geçerli öğenin koleksiyon içindeki konumunu tanımlar.

Varlığınızı Menşei Özellik
$index Numara Mevcut öğenin konumu, 0'dan başlayarak.
$first Boole Yalnızca ilk madde için geçerlidir.
$last Boole Bu yalnızca son madde için geçerlidir.
$middle Boole Birinci ya da sonuncu olmayan her öğe için geçerlidir.
$even Boole $index çift olduğunda doğrudur.
$odd Boole $index tek sayı olduğunda doğrudur.

Tipik bir kullanımda, zebra çizgileri için ng-class ile birleştirilirler.ping, de olduğu gibi ng-class="{'row-alt': $odd}"Ya da ng-if kullanarak son satır hariç her satıra ayırıcı eklemek için, şu şekilde yazılabilir: ng-if="!$last"İnsan tarafından okunabilir bir satır numarası görüntülemek oldukça basittir. {{$index + 1}}İndeks sıfır tabanlı olduğundan, koleksiyon değiştiğinde altı özelliğin tamamı otomatik olarak yeniden hesaplanır, bu nedenle hiçbir şeyin elle yeniden hesaplanmasına gerek yoktur.

Sık Karşılaşılan ng-repeat Hataları ve Bunları Düzeltme Yöntemleri

Çoğu ng-repeat sorunu, yinelenen değerlerden, kapsam kalıtımından veya yönergenin yanlış öğede bulunmasından kaynaklanır. Aşağıdaki her belirti, nedenini belirtir.

  • Tekrarlayıcıda aynı öğenin tekrarlanmasına izin verilmez: Koleksiyon tekrarlanan bir değer içeriyor. Ekle track by $index, ya da daha iyisi, track by Eşsiz bir mülk.
  • Liste hiçbir şey göstermiyor: Görünümdeki ad, kapsamdaki özellikle eşleşmiyor. Koleksiyonu şu şekilde yazdırın: {{TopicNames}} Ulaştığını teyit etmek için.
  • Sarmalayıcı da dahil olmak üzere her öğe tekrarlanır: `ng-repeat` öğesi yerine konteynere yerleştirildi. Lütfen onu doğru yere taşıyın. <li> or <tr>.
  • Bir giriş alanını düzenlemek yanlış satırı değiştirir: Liste şöyledir: tractarafından $index Ürünler yeniden sipariş edilirken. Track yerine istikrarlı bir tanımlayıcı ile.
  • Döngü içindeki değişiklikler kalıcı olmaz: Her yinelemenin kendi alt kapsamı vardır, bu nedenle bir temel veri türüne yazmak yerel bir kopya oluşturur. Bir nesne özelliğine yazmak, örneğin... item.done.

SSS

Evet, kullanarak ng-repeat="(key, value) in myObject"AngularJS'in nesne anahtarlarını ekleme sırasına göre değil, sıralı olarak yinelediğini unutmayın; bu nedenle, sıralama önemli olduğunda dizi daha güvenlidir.

İfade içindeki zincirleme filtreler, örneğin şu şekilde: ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Orijinal diziye dokunulmaz; yalnızca işlenen sıra ve alt küme değişir.

Evet. AI araçlar ng-repeat'i eşler *ngFor hem de track tarafından trackBy fonksiyonları. Filtreleri dikkatlice kontrol edin, çünkü Angular bilerek yerleşik filtre ve orderBy borularını kaldırdı.

Yapay zeka araçları, her özetleme işleminde yeniden çalışan ve eksik olan tekrarlayan ifade içindeki fonksiyon çağrılarını tespit eder. tracDOM'un tamamen yeniden oluşturulmasını zorlayan maddeler. Her ikisi de yavaş çalışan bir listenin olağan nedenleridir.

Yorum formunu kullanın, ng-repeat-start hem de ng-repeat-endBu, bir dizi kardeş öğeyi tekrarlayan bir yapıdır. Bu durum, fazladan bir div'in işaretlemeyi bozacağı tablolarda önemlidir.

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