Harun Özer


Proje veya dijital katalog yaptırmak için
iletişim formu doldurabilirsiniz..

<< AngularJS form validation | Microsoft.ACE.OLEDB.12.0 provider is not registered windows application>>

AngularJS ng-repeat

Yazar harunozer 04 July 2014

AngularJS ng-repeat Ng-repeat ng-modul e ait bir directive dir. Array içindeki nesnelere sıralı erişim sağlar. Foreach döngüsü gibi düşünelbilinir. Tabiki bazı farklılıklarla.

Her dönüşte bazı özellikler setlenir. Bu özellikler;

$index : elemanın index değerini verir.

$first : 1. Elemanda true değerini alır.

$middle : 1. Ve son eleman hariç true değerini alır.

$last : son elemanda true değerini alır.

$even : çift indexte true değerini alır.

$odd : tek indexte true değerini alır.

ng-init attirbutesi ile her dönüşte kod çalıştırılabilinir.

2 şekilde kullanımı vardır.

1. yötemde ng-repeat directive ile tanımlanan elementin içi döndürülür.

<div ng-app>

    <div ng-controller="listecontroller">

        <div ng-repeat="k in kisiler"  ng-init="test($index);">

            {{k.ad}} - {{k.yas}} - {{k.cinsiyet}} - {{$first}} - {{$middle}} - {{$last}} - {{$even}} - {{$odd}}

        </div>

</div>

2. yöntemde ise ng-repeat-start ve ng-repeat-end tanımlamaları arasında döngü kurulur.

<div ng-app>

    <div ng-controller="listecontroller">        

        <div ng-repeat-start="k in kisiler">            Header {{k.ad}}        </div>

        <div class="body">            Body {{k.yas}}        </div>

        <div ng-repeat-end>            Footer {{k.cinsiyet}}        </div>

    </div>

</div>

Arraydeki bazı değerlerin filtrelenmesi isteniliyorsa “k in kişiler | filter:deger” yazılarak filtre uygulanabilir. Bu şekilde ki kullanımda deger nesnenin bütün özelliklerinde aranır. Yani bir özellikte de bu değer geçse o eleman filtreden geçmiş olur. Eğer deger nesne olarak verilirse, özellik isimleri tutanlar birbirleri ile karşılaştırılır. Yani { $:”h” ad:”h”,yas:5} nesnesi filter e verilirse $ özelliğinde ki değer herhangibir özellikte geçen, ad özelliğinde h, yas özelliği de 25 olan elemanlar filtreden geçer.

ng-repeat da orderby kullanımı da basittir. ng-repeat özelliğinin sonuna |orderBy:ColName:Reverse ile sıralama da yapılır. Reverse true ise azalan, false ise artan sıralama yapılır.

Şimdi ufak bir örnek yapalım. kisiler listemiz olsun ve bu listeyi ng-repeat ile ekrana basalım. Filtre için ve order by için de inputlar ekleyelim. Örnek uygulamamızın html kısmı aşağıdaki gibidir.

<div ng-app>

    <div ng-controller="listecontroller">

        <input type="ara" ng-model="k.$" placeholder="ara..." />

        <input type="ara" ng-model="k.ad" placeholder="ad..." />

        <input type="ara" ng-model="k.yas" placeholder="yas..." />

           <select ng-model="order_col" ng-options="i.t for i in order_cols">

        </select>

        <select ng-model="order_typ" ng-options="i.t for i in order_types">

        </select>

        <div ng-repeat="k in kisiler | filter:k | orderBy:order_col.v:order_typ.v"  ng-init="format(k);">

            <div ng-show="$first">Kişiler</div>

            <div class="even{{$even}}">{{$index+1}} -> {{k.ad}} - {{k.yas}} - {{k.cinsiyetformat}}</div>

            <div ng-show="$last">Toplam {{kisiler.length}} kayıt</div>

        </div>

    </div>

</div>

listecontroller function da aşağıdaki gibidir.

function listecontroller($scope){

    $scope.kisiler = [

      {ad:'Harun', yas:32, cinsiyet:'E'}

      ,{ad:'Ayşe', yas:12, cinsiyet:'K'}

      ,{ad:'Ahmet', yas:18, cinsiyet:'E'}

      ,{ad:'Mehmet', yas:25, cinsiyet:'E'}

      ,{ad:'Fatma', yas:55, cinsiyet:'K'}

      ,{ad:'Mustafa', yas:24, cinsiyet:'E'}

      ,{ad:'Hayriye', yas:70, cinsiyet:'K'}

      ,{ad:'Duruye', yas:33, cinsiyet:'K'}

    ];

    $scope.order_cols = [{v:'ad',t:"Ad"},{v:'yas',t:"Yaş"},{v:'cinsiyet',t:'Cinsiyet'}];

    $scope.order_types = [{v:true,t:"Azalan"},{v:false,t:'Artan'}]; 

    $scope.order_col=$scope.order_cols[0];

    $scope.order_typ=$scope.order_types[0];

    $scope.format = function(k){

        //k.cinsiyet setlenirse kisiler nesnedeki değer güncellenmiş olur.

        if(k.cinsiyet == "E")

            k.cinsiyetformat = "Bay"

        else

            k.cinsiyetformat = "Bayan"

    }

}

Örnek uygulamayı bu adresten çalıştırabilirsiniz.

http://jsfiddle.net/harunozer/f7n2g/2/

Tam Sayfa
Tags angularJS,
Kategoriler AngularJS
İşlemler
Bu Makale 5  Kez Beğenildi.
İsim :    
e-Mail :    
Web Site :  
İmage :  
Güvenlik Kodu :  

Güvenlik Resmi
Resmi Yenile
    
Yorum :  
Tasarım Desenleri ve Mimarileri