AngularJS Yazı Dizisi 4: Filter İşlemleri

Posted on by

Merhaba,

AngularJS yazı dizisinin 4. bölümünde size içerik filtreleme işlemi, yani Filter özelliğini anlatacağım. Yazı disinin 3. bölümünü okumadıysanız, buradan ilgili içeriğe ulaşabilirsiniz. Sözü kesmeden hemen filtreleme özelliklerini anlatmak istiyorum.

Bu yazıda verinin nasıl çekilip veri üstünde filtreleme yapılacağıyla ilgili çalışma yapacağız. Bunun için kendi denemelerinizde veritabanı bağlantısı sağlayabilirsiniz; ancak ben pratik olması sebebiyle aşağıdaki gibi bir json verisi kullanacağım. Siz de employees.json isimli dosyayı kendiniz oluşturmayı ve aşağıdaki verileri içine yazmayı ihmal etmeyin.

[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]

employees.json dosyamızı oluşturduktan sonra ihtiyacımız olan, bu verinin kullanılacağı bir Angular controller ve sunumu için de bir html arayüzü. Öncelikle employees_controller.js isimli dosyamızı oluşturalım ve aşağıdaki kodları içine aktaralım.


var module = angular.module('module1', []);

module.controller('controller1', function($scope, $http){
$http.get('employees.json').success(function(data){
$scope.teams = data;
});

$scope.sortBy = 'firstName';
$scope.reverse = true;
});

Böylece module1 isimli bir modülümüz ve controller1 isimli bir controllerımız olmuş oldu. Şimdi açıklama kısmına geçelim.

Burada yaptığımız işlem, angular get metoduyla json verilerimizi çağırmak ve call fonksiyonumuz başarılı olduğu takdirde $scope ile bir teams değişkeni oluşturmak. Oluşturduğumuz bu değişkene de json verilerini atmış olduk. Aşağıda tanımladığımız sortBy değeriyle de açılış esnasında ada göre sıralama yapacağımızı, reverse ile bu sıralamanın ters (Z-A) olacağını belirtmiş olduk. Böylece ana işlemi yapacak controller hazırlanmış oldu.

Şimdi sunum kısmına geçelim. Bunun için bir index.html dosyası oluşturup aşağıdaki kodları dosyanın içine atalım.

<!DOCTYPE html>
<html ng-app="module1">
<head>
<title>AngularJS Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" type="text/javascript"></script>
<script src="employees_controller.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="controller1">
<input id="searchText" ng-model="searchText" placeholder="team name, country i.e." type="text" width="300">
<table border="1" bordercolor="grey" cellpadding="5px" id="teamtable">
<tbody>
<tr>
<th><a href="" ng-click="sortBy='firstName'; reverse=!reverse">First Name</a></th>
<th><a href="" ng-click="sortBy='lastName'; reverse=!reverse">Last Name</a></th>
</tr>
<tr ng-repeat="team in teams | filter:searchText | orderBy:sortBy:reverse">
<td>{{team.firstName}}</td>
<td>{{team.lastName}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Burada modülümüzü ve controllerımızı tanımladıktan sonra verilerimiz bağlamak için bir tablo oluşturduk. ng-repeat fonksiyonu ile json verilerimizi bir foreach döngüsünde döndürür gibi ekrana bastırdık. First Name ve Last Name başlıklarımızda da sıralama yapmak için bir anchor etiketi ekledik ve ng-click ile de sıralama yapacağımız veri adlarını yazmış olduk. Linke tekrar tıkladığımız zaman da listelemeyi ters çevirmek için reverse özelliğini de yine anchor etiketi içinde belirttik.

Controller tarafında oluşturduğumuz filtreleme fonksiyonumuzu da kullanmak için ng-repeat içinde filter:searchText etiketini koyduk. Bu sayede searchText inputu içerisinde filtreleme işlemi yapabilir hale geldik.

AngularJS yazı dizisinin bu bölümünün de sonuna geldik. İyi kodlamalar.