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.

İçerik göster

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

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

<head>

<title>Test Uygulaması</title>

var app = angular.module("app", []);

app.controller('test', ['$scope', function($scope){

$scope.list = ["Test 1", "Test 2", "Test 3", "Test 4"];

}]);

</ script>

.odd{

background-color: blue;

}

.even{

background-color: red;

}

</style>

</head>

<ul>

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

5/5 - (2 votes)

Kategoriler

Bloga e-posta ile abone ol

AngularJS NgClassEven Ve NgClassOdd Direktifleri Nerede Ve Niçin Kullanılır