AngularJS - Filtreleme

AngularJS'de Filtreleme girilen ifadeye göre arama yapabilmemizi sağlar. Daha önceki yazılarımda AngularJS'in Two Way Binding mantığı ile çalıştığını yazmıştım.

Filter ise yazdığımız ifadeye göre listelenen veriyi göstermemizi sağlar. Listemizdeki elemanlar dinamik olarak değişecektir.

Örnek olarak Kişiler listemizde arama yapmamızı sağlayacak bir TextBox ve kontrolümüz filtre yapacak değeri tutacak.
Aynı zamanda Ekle ve Sil işlemi yapacak fonksiyon yazıp butonların ng-click directivini kullanabileceğiz.
Sayfa yüklendiğinde Listelenen verilerden seçileni sil için de bir fonksiyon yazacağız.


Ad: Soyad:
Kişi Ara

Kişiler

{{k.ad+' '+k.soyad}}


Kaynak Kodu
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
</head>
<body>
    <div ng-app="myApp" ng-controller="myController">
         
        Ad: <input type="text" ng-model="ad" name="name" value="" />
        Soyad: <input type="text" ng-model="soyad" name="name" value="" />

        <button ng-click="ekle()">Ekle</button>
        <button ng-click="sil()">Sil</button>
        <br />
        Kişi Ara<input type="text" ng-model="filtre" />
        <br />
        <h3>Kişiler</h3>

        <p ng-repeat="k in kisiler | filter:filtre">
                {{k.ad+' '+k.soyad}}
                <input type="button" value="Kişi Sil" ng-click="secileniSil(k)" />
        </p>
    </div>
</body>
</html>
<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.kisiler = [{ ad: 'Mert', soyad: 'Metin'  }, { ad: 'Ali', soyad: 'Arabacı'  }, { ad: 'Hakan', soyad: 'Namlı'  }];
       
        $scope.ekle = function () {
            $scope.kisiler.push({ ad: $scope.ad, soyad: $scope.soyad })
        }
        $scope.sil = function () {
            $scope.kisiler.pop();
        }

        $scope.secileniSil = function (kisi) {
            $scope.index = $scope.kisiler.indexOf(kisi);
            $scope.kisiler.splice($scope.index, 1);
        }
        });

</script>

ng-repeat="k in kisiler | filter:filtre" filter özelliğine textbox'ta yazdığımız ng-model="filtre" var ve yazdığımız değere göre listede arama yapacak. Listeleme işlemini ng-repeat directivini kullandık.

Bir listeden veriyi pop() metodu ile sileriz. Listedeki en büyük index'li elemanı siler.
Listeye veriyi push() metodu ile ekleriz.ad ve soyad özelliği ile veri ekledik.
Seçilen bir elemanı silmek için secileniSil adında bir fonksiyon oluşturduk. $scope.index değişkenindeki index listede index değeri tutar. indexOf() metodu ile index elemanı tuttuk. splice() metodu ile de silme işlemini gerçekleştirdik.Parametreleri ise ilk parametre:seçilen elemanın index'i ve ikinci parametre ise kaç tane eleman sileceğimizdir. 

Yorumlar

Yorum Gönder