Daha önce ngClass direktifini kullandıysanız bu iki direktif kullanımının ve amacının ngClass direktifinden pek farkı yok ikisini birbirinden ayıran tek fark ngClassEven ve ngClassOdd direktifleri ngRepeat ile yapılan listelemelerde tek veya çift index değerine sahip liste elemanlarında çalışıyor.
AngularJS ngClassEven ve ngClassOdd direktifleri nerede ve niçin kullanılır
ngClassEven
ve ngClassOdd
direktiflerini kullanmak için ngRepeat
döngüsünü kullanmalısınız bu döngünün işleyişi şöyle oluyor ngRepeat
ile listelenen her liste elemanı 0. index’ten başlayıp liste sonuna kadar 1’er 1’er artarak devam etmektedir tek sayılarda ngClassOdd
direktifine vermiş olduğunuz değer çift sayılı liste elemanlarında ise ngClassEven
direktifine vermiş olduğunuz değer class olarak eklenecektir.
Şimdi anlattıklarımızı pekiştirmek adına çok ufak bir örnek yapalım.
Örnek
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html ng-app="app"> <head> <title>Test Uygulaması</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">< /script> <script type="text/javascript"> var app = angular.module("app", []); app.controller('test', ['$scope', function($scope){ $scope.list = ["Test 1", "Test 2", "Test 3", "Test 4"]; }]); </ script> <style type="text/css"> .odd{ background-color: blue; } .even{ background-color: red; } </style> </head> <body ng-controller="test"> <ul> <li ng-repeat="item in list" ng-class-even="'even'" ng-class-odd="'odd'"> {{item}} </li> </ul> </body> </html> |
Üstteki kodda ng-repeat
döngüsünde controller içerisinde $scope
nesnesine list adında tanımladığımız array’i dönüyoruz ve ng-repeat’in yer aldığı li
etiketinde konunun asıl anlatım hedefi olan ng-class-even
ve ng-class-odd
etiketlerini görmüşsünüzdür ve bunlara verdiğimiz değerler head
etiketleri arasında style etiketi içerisinde css class olarak tanımlandı.
ng-class-even
ve ng-class-odd
direktiflerini kullanırken vermiş olduğunuz değerlerin tek tırnak '
içerisinde olmasına dikkat ediniz. Aksi durumda çalışmayacaktır bu direktifler.
Sonuç
Sonuç olarak gördüğünüzde ng-repeat
‘de yer alan $index
özelliğini kullanarak daha öncede bahsettiğimiz gibi 0’dan başlayıp liste bitene kadar bir bir arttırıp devam etmektedir ve her döngüde sayı tek ise ng-class-odd
attirubute’ünde yer alan değer class’a eklenmektedir fakat eğer kayıt çift ise o zaman ng-class-even
attribute’ündeki değer class’a eklenmektedir.