AngularJS - Yinelenen Öğeleri Kullanma

Web uygulamalarının önemli bir parçası, listeleme örneğiBu, veritabanlarıyla çalışırken her zaman önemli olacaktır, çünkü depolanan öğeleri göstermemiz gerekir, ayrıca örneğin bir çevrimiçi mağaza işletiyorsak bir ürün listesi göstermemiz gerekir.
Anlamamız gereken şey, kayıtlar farklı olsa da, içerikteki fark ne olursa olsun, muhtemelen bir tablonun veya sıralı bir listenin satırları olduğundan, bu tür öğeler yinelenir.
AngularJS hayatımızı zorlaştırmaz, sadece kullanmak istersek veya kullanmamız gereken bir liste yapmak istersek ng-tekrar Bu, bir listede bulunan her bir eleman için bir eleman oluşturur, bununla bir ürün listesi iletebilir ve kolayca bir tablo oluşturabiliriz.
Diyelim ki bir okul için bir öğrenci listesi yapıyoruz, anahtar listeyi oluşturmaktır, normalde onu bazılarından alırdık. internet servisi bu bir veritabanına danışır, ancak basitleştirmek için kendimiz bir liste yaparız, o zaman bu listeye kendi içimizde deriz. $ kapsam ile birlikte kullanabilmek için HTML talimatı dahil edebiliriz ng-tekrar bahsettiğimiz, aşağıdaki kodu görelim:

 var öğrenciler = [{name: 'María Rojo', id: '1'}, {name: 'Manolo Rodriguez', id: '2'}, {name: 'Joao Pinto', id: '3'}]; function StudentListController ($ kapsam) {$ kapsam.öğrenciler = öğrenciler; } 

Burada öğrenci listesini tanımladık ve ardından söz konusu listeyi öğrenciye ileteceğimiz controller'ı tanımladık. $ kapsam arasında kontrolör, şimdi kodu yazmalıyız HTML:

 
 
 {{Öğrenci adı}}

Burada listemizi bir controller olarak tanımladığımızı görüyoruz. AngularJS ve onunla $ kapsam söz konusu denetleyicinin öğrenci listesine erişmemizi sağlar, sonra kullanırız ng-tekrar öğrenci listesinin her öğesi için bir öğrenci oluşturacağınızı ve son olarak da

bizi uygulama içinde başka bir yere götüren bir çapa oluşturuyoruz. Bunun tarayıcımızda nasıl göründüğüne dair aşağıdaki resme bakalım:

Ekleme () işleviYapabileceğimiz başka bir şey, listeye yeni öğeler eklemektir, bunun için işlevimiz var. ek ()Örneğin, yeni öğrenciler ekleyen bir düğmeye eklersek, değişikliği otomatik olarak görürüz, çünkü AngularJS Sayfayı yeniden yüklemek zorunda kalmadan belgenin gerçek zamanlı olarak bize tazelik dokunuşunu verir.
Aşağıdaki kodda denetleyicinin öğrenci eklemek için nasıl görüneceğini görelim:

 var öğrenciler = [{name: 'María Rojo', id: '1'}, {name: 'Manolo Rodriguez', id: '2'}, {name: 'Joao Pinto', id: '3'}]; function StudentListController ($ kapsam) {$ kapsam.öğrenciler = öğrenciler; $scope.addNew = function () {$scope.students.splice (1, 0, {isim: 'Joaquin Fernandez', id: '4'}); }; } 

Şimdi sadece yeni fonksiyonumuzdaki çağırmamız gerekiyor. HTML, bunu şu şekilde yapabiliriz:

 {{Öğrenci adı}}

Sokmak

Bunun tarayıcımızda nasıl göründüğüne bakalım:

Yeni öğrenciyi nasıl listeye eklediğimizi görüyoruz ama butona her tıkladığımızda aynı kişiyi ekliyoruz çünkü dinamik kod yapmamışız o da başka bir konu, altını çizmemiz gereken şu. zorundaydık ekle denetleyiciyi yerleştirdiğimiz, bu şekilde düğmemizi $ kapsam.
Bununla, tekrarlanan öğelerin işlenmesini gördüğümüz için bu öğreticiyi bitiriyoruz. AngularJS Oldukça basittir ve örneklerde gördüğümüz gibi bize hızlı bir şekilde listeler oluşturma imkanı verir.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.