AngularJS'de orderBy Filtresi | Turkish Tutorial

codings(54)
Published in
#utopian-io
Words
327
Reading
2 min
Listen
Play
9y

orderBy Filtresi

Bu filtre ile, bir array değişkenindeki elemanların görünüme yansıma sıralarını belirleyebilirsiniz;

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">

        <div ng-repeat="sayi in sayilar">
            {{sayi}}
        </div>
        <hr>

        <div ng-repeat="sayi in sayilar1">
            {{sayi}}
        </div>
        <hr>
        
        <div ng-repeat="sayi in sayilar2">
            {{sayi}}
        </div>

    </div>

    <script type="text/javascript">

        var uygulama = angular.module("ngUygulamam", []);
        uygulama.controller("ngKontrol", function($scope, $filter){

            var sayilar = [20, 8, 84, 15, 51, 85];
            $scope.sayilar = sayilar;
            $scope.sayilar1 = $filter("orderBy")(sayilar);
            $scope.sayilar2 = $filter("orderBy")(sayilar, "-");

        });

    </script>

</body>
</html>

AngularJs15.png

AngularJs16.png

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">

        <div ng-repeat="sayi in sayilar">
            {{sayi}}
        </div>
        <hr>

        <div ng-repeat="sayi in sayilar1">
            {{sayi}}
        </div>
        <hr>

        <div ng-repeat="sayi in sayilar2">
            {{sayi}}
        </div>

    </div>

    <script type="text/javascript">

        var uygulama = angular.module("ngUygulamam", []);
        uygulama.controller("ngKontrol", function($scope, $filter){

            var sayilar = [2, 54, 88, 21, 78, 92, 32, 45, 65, 7, 89, 13];
            $scope.sayilar = sayilar;
            $scope.sayilar1 = $filter("orderBy")(sayilar);
            $scope.sayilar2 = $filter("orderBy")(sayilar, "-");

        });

    </script>

</body>
</html>

AngularJs17.png

AngularJs18.png

Örneğimizde, sayılar değişkenine atadığımız rastgele sayılar array'i, içerisinde integer değerinde veriler bulunuyor. Bu verileri orderBy filtresi ile sıralayabiliriz. sayilar1 için artan sıralamayı (geçerli) sağlarken, sayilar2 scope değişkeni için azalan sıralamayı sağladık.

Bir diğer örneğimizde, orderBy filtresini kelimeleri alfabetik olarak sıralamak için kullanalım;

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">

        <div ng-repeat="kelime in kelimelerAlfabetik">
            {{kelime}}
        </div>
        <hr>

        <div ng-repeat="kelime in kelimelerAlfabeTersi">
            {{kelime}}
        </div>

    </div>

    <script type="text/javascript">

        var uygulama = angular.module("ngUygulamam", []);
        uygulama.controller("ngKontrol", function($scope, $filter){

            var kelimeler = ["elma", "armut", "vişne", "muz"];
            $scope.kelimelerAlfabetik = $filter("orderBy")(kelimeler);
            $scope.kelimelerAlfabeTersi = $filter("orderBy")(kelimeler, "-");

        });
        
    </script>

</body>
</html>

AngularJs19.png

AngularJs20.png

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">

        <div ng-repeat="marka in markalarAlfabetik">
            {{marka}}
        </div>
        <hr>

        <div ng-repeat="marka in markalarAlfabeTersi">
            {{marka}}
        </div>

    </div>

    <script type="text/javascript">

        var uygulama = angular.module("ngUygulamam", []);
        uygulama.controller("ngKontrol", function($scope, $filter){

            var Markalar = ["Honda", "Hyundai", "Mercedes", "Volvo", "Fiat", "Bmw", "Opel", "Ford", "Toyota"];
            $scope.markalarAlfabetik = $filter("orderBy")(Markalar);
            $scope.markalarAlfabeTersi = $filter("orderBy")(Markalar, "-");

        });

    </script>

</body>
</html>

AngularJs21.png

AngularJs22.png

Not: orderBy filtresi ile sıraladığımız array değişkeni içerisinde eleman olarak Javascript objeleri de kullanabiliriz.

İçerisinde eleman olarak objeler içeren bir array ile bu objenin spesifik alanlarına göre orderBy filtresini nasıl kullanacağımızı sebzeler.json dosyamızın içerisindeki sebze array'i ile göstermeye çalışalım;

Sebze.json dosyası içeriği;

{"sebzeler":[
    {"isim":"Patates","kalori":77,"pro":2,"yag":0.1,"karb":17},
    {"isim":"Domates","kalori":18,"pro":0.9,"yag":0.2,"karb":3.9},
    {"isim":"Patlıcan","kalori":25,"pro":2,"yag":0.2,"karb":6}
]}

AngularJs23.png

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">

        <table border="1" cellpadding="8" cellspacing="1">
            <tr>
                <th>Sebze Adı</th>
                <th>Kalori</th>
                <th>Proteyin</th>
                <th>Yağ</th>
                <th>Karbonhidrat</th>
            </tr>
            <tr ng-repeat = "sebze in sebzelerArray">
                <td>{{sebze.isim}}</td>
                <td>{{sebze.kalori}}</td>
                <td>{{sebze.pro}} gr</td>
                <td>{{sebze.yag}} gr</td>
                <td>{{sebze.karb}} gr</td>
            </tr>
        </table>

    </div>

    <script type="text/javascript">

        var uygulama = angular.module("ngUygulamam", []);
        uygulama.controller("ngKontrol", function($scope, $http, $filter){

            $http.get("sebze.json").then(function(resp){

                $scope.sebzelerArray = $filter("orderBy")(resp.data.sebzeler, "kalori");
                
            });

        });

    </script>

</body>
</html>

AngularJs24.png

AngularJs25.png

Dikkat ederseniz, $http servisini kullanmak için kontrol metoduma dependency olarak belirttik ve bir GET isteği ile sebze.json dosyası içeriğini aldık. İçerisinde objeler bulunan bir array'i orderBy filtresi ile filtrelerken sıralama yapmak istediğimiz obje değişkenini belirtmemiz gerekir. Örneğimizde sebzeleri kalori değerlerine göre siraladık. Burada geçerli olarak artan bir sıralama bulunuyor. Eğer bu sıralamayı azalan bir sıralama haline getirmek istersek, aynı şekilde reverse özelliğini kullanmalıyız;

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">

        <table border="1" cellpadding="8" cellspacing="1">
            <tr>
                <th>Sebze Adı</th>
                <th>Kalori</th>
                <th>Proteyin</th>
                <th>Yağ</th>
                <th>Karbonhidrat</th>
            </tr>
            <tr ng-repeat = "sebze in sebzelerArray">
                <td>{{sebze.isim}}</td>
                <td>{{sebze.kalori}}</td>
                <td>{{sebze.pro}} gr</td>
                <td>{{sebze.yag}} gr</td>
                <td>{{sebze.karb}} gr</td>
            </tr>
        </table>

    </div>

    <script type="text/javascript">

        var uygulama = angular.module("ngUygulamam", []);
        uygulama.controller("ngKontrol", function($scope, $http, $filter){

            $http.get("sebze.json").then(function(resp){

                $scope.sebzelerArray = $filter("orderBy")(resp.data.sebzeler, "-kalori");
                
            });

        });

    </script>

</body>
</html>

AngularJs26.png

AngularJs27.png

orderBy filtresini, array içerisindeki objelerin herhangi bir değişkeni için belirleyebilirsiniz. İsterseniz bu örneği modüler hale getirerek, istenilen obje değişkenine göre tablo sıralamasını değiştirebileceğimiz bir görünüm kazandıralım;

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">

        Sıralama Ölçütü:
        <select ng-change="olcutDegistir()" ng-model="siralamaOlcut">
            <option value="isim">İsme Göre Alfabetik</option>
            <option value="-isim">İsme Göre Alfabe Tersi</option>
            <option value="kalori">Kaloriye Göre Artan</option>
            <option value="-kalori">Kaloriye Göre Azalan</option>
            <option value="karb">Karbonhidrat Miktarına Göre Artan</option>
            <option value="-karb">Karbonhidrat Miktarına Göre Azalan</option>
        </select>
        <hr>

        <table border="1" cellpadding="8" cellspacing="1">
            <tr>
                <th>Sebze Adı</th>
                <th>Kalori</th>
                <th>Proteyin</th>
                <th>Yağ</th>
                <th>Karbonhidrat</th>
            </tr>
            <tr ng-repeat="sebze in sebzelerArray">
                <td>{{sebze.isim}}</td>
                <td>{{sebze.kalori}}</td>
                <td>{{sebze.pro}} gr</td>
                <td>{{sebze.yag}} gr</td>
                <td>{{sebze.karb}} gr</td>
            </tr>
        </table>

    </div>

    <script type="text/javascript">

        var uygulama = angular.module("ngUygulamam", []);
        uygulama.controller("ngKontrol", function($scope, $http, $filter){

            $scope.siralamaOlcut = "isim";
            $http.get("sebze.json").then(function(resp){

                $scope.sebzelerArray = resp.data.sebzeler;
                $scope.olcutDegistir();

            });

            $scope.olcutDegistir = function(){
                $scope.sebzelerArray = $filter("orderBy")($scope.sebzelerArray, $scope.siralamaOlcut);
            };

        });
        
    </script>


</body>
</html>

AngularJs28.png

AngularJs29.png

AngularJs30.png

AngularJs31.png

AngularJs32.png

AngularJs33.png

AngularJs34.png

Örneğimizde yeni bir AngularJS direktifi kullandık. Ng-change ile, tıpkı klasik HTML nitelik tanımlayıcılarındaki onchange olay dinleyicisinde olduğu gibi, input verisi değiştiğinde çalışacak expression betirtilir. Bizim örneğimizde, siralama ölçütü değeri değiştiğinde, bir $scope üzerinde erişilebilir olan olcutDegistir() fonksiyonunu çalıştırarak filtreyi aktif ediyoruz.

NOT: İlerleyen eğitimlerin devamındaki bölümlerde ng-change ve diğer olay dinleyici direktifi hakkında daha ayrıntılı bir açıklama yapacağız.

Ayrıca örneğimizde ng-model direktifinin kullanımının güzel bir örneğini görebilirsiniz. Ek olarak dikkat ederseniz, sebze.json dosyasını çektiğimiz yerde ayrıca olcutDegistir fonsiyonunu da çağırarak başlangıç ölçüt değeri olan "isim" için sıralama gerçekleştiriyoruz. Bu örneği, $filter özelliği kullanmaktansa görünüm üzerinde filtreme yaparak çok daha basit bir şekilde halledebiliriz;

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">

        Sıralama Ölçütü:
        <select ng-change="olcutDegistir()" ng-model="siralamaOlcut">
            <option value="isim">İsme Göre Alfabetik</option>
            <option value="-isim">İsme Göre Alfabe Tersi</option>
            <option value="kalori">Kaloriye Göre Artan</option>
            <option value="-kalori">Kaloriye Göre Azalan</option>
            <option value="karb">Karbonhidrat Miktarına Göre Artan</option>
            <option value="-karb">Karbonhidrat Miktarına Göre Azalan</option>
        </select>
        <hr>

        <table border="1" cellpadding="8" cellspacing="1">
            <tr>
                <th>Sebze Adı</th>
                <th>Kalori</th>
                <th>Proteyin</th>
                <th>Yağ</th>
                <th>Karbonhidrat</th>
            </tr>
            <tr ng-repeat="sebze in sebzelerArray">
                <td>{{sebze.isim}}</td>
                <td>{{sebze.kalori}}</td>
                <td>{{sebze.pro}} gr</td>
                <td>{{sebze.yag}} gr</td>
                <td>{{sebze.karb}} gr</td>
            </tr>
        </table>

    </div>

    <script type="text/javascript">

        var uygulama = angular.module("ngUygulamam", []);
        uygulama.controller("ngKontrol", function($scope, $http){

            $scope.siralamaOlcut = "isim";
            $http.get("sebze.json").then(function(resp){

                $scope.sebzelerArray = resp.data.sebzeler;

            });

        });

    </script>

</body>
</html>

AngularJs35.png

AngularJs36.png

AngularJs37.png

AngularJs38.png

AngularJs39.png

Bu örnek, bir önceki örnek ile aynı çıktryi verecek. Özellikle filtreleme sırasında modelinize bağlı bir değişkeni filtreleme sirasında kullanacaksanız. Bunu görünümde yapmanız AngularJS'in yapısı için çok daha verimli olacaktır.


Posted on Utopian.io - Rewarding Open Source Contributors

utopian-io
angularjs
via utopian
This post was published via utopian. Ecency is not the originator or editor of this content and displays it for discovery purposes only.
1
AngularJS'de orderBy Filtresi | Turkish Tutorial | Ecency