AngularJS – Basit Search Filter

Merhaba arkadaşlar
Bu kez de AngularJS ile çooooooook ama çok basit şekilde listelediğimiz nesneler üzerinde bir Text input ile nasıl arama yapabiliriz sorusunun cevabını 2 satırda bir fiddle’da paylaşmak istiyorum.

Bu datayı AngularJS ile Controller içersinde oluşturalım ve bir $scope değiskeni içersine şu şekli tanımlamamız gerekiyor .

var app = angular.module("MezoBlogSample",[]);
    app.controller("SampleController" ,["$scope", function($scope ){
        $scope.companyList = {
            "companies": [{
                "CompanyID": "1",
                "CompanyName": "abc Company"
            }, {
                "CompanyID": "2",
                "CompanyName": "123 Company"
            }, {
                "CompanyID": "3",
                "CompanyName": "xyz Company"
            }]
        };
    }]);

									

ve her zaman olduğu gibi HTML kodlarımızı bir oluşturalım ve listeme işlemini gerçekleştirelim.

<!DOCTYPE html>
<html lang="en" ng-app="MezoBlogSample">
<head>
    <script src="lib/angular.min.js"></script>
    <script src="filterSearchSample/controller/SampleCtrl.js"></script>
    <meta charset="UTF-8">
    <title>Mezo Blog</title>
</head>
<body ng-app>
<div ng-controller="SampleController">
<ul>
    <li ng-repeat="company in companyList.companies ">
        {{company.CompanyName}}
    </li>
</ul>
</div>
</body>
</html>

									

Bu asamadan sonra JSON nesnemizin içersindeki elemanların ekranımıza listelendiğini görebileceksiniz.

İş arama kısmına geldiğinde ise HTML de de şu şekli bir değişiklik yapmamız gerekmekte.

<div ng-controller="SampleController">
    <input type="text" ng-model="search"/>
<ul>
    <li ng-repeat="company in companyList.companies | filter:search ">
        {{company.CompanyName}}
    </li>
</ul>
</div>

									

Burada kullandığımız FILTER bizim listelediğimiz JSON nesnesi ya da array içersinde input üzerine tanımladığımız ng-model yardımı ile filtreleme yapıp $scope.companyList adında ki objeye atama yapar böylelikle siz de listeye abc yazdığınızda listedeki abc yi bularak $scope.companyList nesnesine atamasını yaparak bizlere gösterir 🙂

Benim yorumlamam bu kadar 🙂
Iste bu kadar basıt 🙂
Örnek kodu Fiddle’dan inceleyebilirsiniz.

Umarım Yararlı Olur
Bilgiyle Kalın.
M.Zeki OSMANCIK

Leave a Reply

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box