﻿
{"id":7072,"date":"2018-03-17T12:56:40","date_gmt":"2018-03-17T12:56:40","guid":{"rendered":"http:\/\/www.gencayyildiz.com\/blog\/?p=7072"},"modified":"2018-03-17T12:56:40","modified_gmt":"2018-03-17T12:56:40","slug":"angularjsde-filtreler","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/angularjsde-filtreler\/","title":{"rendered":"AngularJS&#8217;de Filtreler"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>Merhaba,<\/p>\n<p>Bu i\u00e7eri\u011fimizde elimizdeki veriler \u00fczerinde belirli filtreleme yapabilme imkan\u0131 sa\u011flayan y\u00f6nergeler \u00fczerinde konu\u015faca\u011f\u0131z.<\/p>\n<p>AngularJS&#8217;de kullanaca\u011f\u0131m\u0131z filtreler \u015funlard\u0131r;<\/p>\n<ul>\n<li><strong>Currency<\/strong><br \/>\nSay\u0131sal bir de\u011feri d\u00f6viz kuru olarak bi\u00e7imlendirmek i\u00e7in kullan\u0131lmaktad\u0131r. Varsay\u0131lan olarak $(dolar) sembol\u00fcd\u00fcr ve bunun yan\u0131nda \u00f6zel d\u00f6viz kuru da tan\u0131mlanabilmektedir.\n<\/li>\n<li><strong>Filter<\/strong><br \/>\nKullan\u0131c\u0131 taraf\u0131ndan girilen bir de\u011fere g\u00f6re veri k\u00fcmesinde filtreleme yap\u0131labilmektedir.\n<\/li>\n<li><strong>Lowercase<\/strong><br \/>\nMetinsel ifadelerin karakterlerini k\u00fc\u00e7\u00fclt\u00fcr.\n<\/li>\n<li><strong>Uppercase<\/strong><br \/>\nMetinsel ifadelerin karakterlerini b\u00fcy\u00fclt\u00fcr.\n<\/li>\n<li><strong>Order By<\/strong><br \/>\nBir veri k\u00fcmesinde belirli bir kolona\/alana g\u00f6re s\u0131ralama yapmak i\u00e7in kullan\u0131l\u0131r.\n<\/li>\n<li><strong>Number<\/strong><br \/>\nSay\u0131sal de\u011ferleri nokta ve virg\u00fcl bi\u00e7iminde g\u00f6sterir ve ondal\u0131kl\u0131 formata getirmede kullan\u0131l\u0131r.\n<\/li>\n<li><strong>Date<\/strong><br \/>\nTarihsel de\u011ferleri bi\u00e7imlendirmek i\u00e7in kullan\u0131lmaktad\u0131r.\n<\/li>\n<li><strong>LimitTo<\/strong><br \/>\nBir veri k\u00fcmesi listelenirken ba\u015ftan ka\u00e7 adetinin listelemeye dahil edilece\u011fini belirtmek i\u00e7in kullan\u0131l\u0131r.\n<\/li>\n<li><strong>JSON<\/strong><br \/>\nBir nesneyi json format\u0131nda bi\u00e7imlendirir.\n<\/li>\n<\/ul>\n<p>AngularJS&#8217;de filtreleme i\u015flemi teknik boyutta a\u015fa\u011f\u0131daki prototipte oldu\u011fu gibi genelle\u015ftirilebilir.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;\u0130fade ya da De\u011fer] | &#x5B;Filtre Ad\u0131] : &#x5B;Parametre]\r\n<\/pre>\n<p>Yukar\u0131daki prototipte g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi filtre uygulayaca\u011f\u0131m\u0131z ifade\/de\u011fer her ne ise &#8220;|&#8221; operat\u00f6r\u00fcyle hangi filtreyi uygulayacaksak belirtmekte ve varsa &#8220;:&#8221; operat\u00f6r\u00fcnden sonra parametre verilmektedir.<\/p>\n<h3><span style=\"color: #ff0000;\">Currency Filtresi<\/span><\/h3>\n<p>Say\u0131sal de\u011ferleri d\u00f6viz kuru olarak bi\u00e7imlendirmek i\u00e7in kullan\u0131lan bir filtredir.<br \/>\nA\u015fa\u011f\u0131daki prototipte oldu\u011fu gibi kullan\u0131lmaktad\u0131r.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&#x5B;De\u011fer] | currency : Sembol : K\u00fcs\u00fcrat\r\n<\/pre>\n<p>\u00d6rnek bir \u00e7al\u0131\u015fma \u00fczerinde g\u00f6stermemiz gerekirse e\u011fer;<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;&quot;&gt;\r\n    &lt;div ng-init=&quot;Sayi = 100&quot;&gt;\r\n        {{Sayi |currency}}\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>kod blo\u011funu inceleyebilirsiniz.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler.png\" alt=\"AngularJS&#039;de Filtreler - Currency \" width=\"63\" height=\"28\" class=\"aligncenter size-full wp-image-7078\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler.png 63w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-980x450.png 980w\" sizes=\"auto, (max-width: 63px) 100vw, 63px\" \/><\/a><br \/>\nVarsay\u0131lan olarak $ ifadesini kullanan currency filtresinin sembol\u00fcn\u00fc a\u015fa\u011f\u0131daki gibi de\u011fi\u015ftirebilirsiniz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;&quot;&gt;\r\n    &lt;div ng-init=&quot;Sayi = 100&quot;&gt;\r\n        {{Sayi |currency : &quot;TL&quot;}}\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-1.png\" alt=\"AngularJS&#039;de Filtreler - Currency\" width=\"71\" height=\"25\" class=\"aligncenter size-full wp-image-7079\" \/><\/a><br \/>\nE\u011fer ki say\u0131sal de\u011ferimiz ondal\u0131kl\u0131 say\u0131 ise k\u00fcs\u00fcrat adedinide a\u015fa\u011f\u0131daki gibi ayarlayabilirsiniz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;&quot;&gt;\r\n    &lt;div ng-init=&quot;Sayi = 99.123&quot;&gt;\r\n        {{Sayi |currency : &quot;TL&quot; : 5}}\r\n    &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-2.png\" alt=\"AngularJS&#039;de Filtreler - Currency\" width=\"86\" height=\"20\" class=\"aligncenter size-full wp-image-7080\" \/><\/a><br \/>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi 99.123 de\u011ferinin k\u00fcs\u00fcrat\u0131 \u00fc\u00e7 adetken, \u00fc\u00e7\u00fcnc\u00fc parametrede belirtilen &#8220;5&#8221; de\u011feri sayesinde .12300 \u015feklinde k\u00fcs\u00fcrat g\u00f6sterilmektedir.<\/p>\n<h3><span style=\"color: #ff0000;\">Filter Filteresi<\/span><\/h3>\n<p>Elimizdeki veri k\u00fcmesinde filtreleme yapma i\u015flevini g\u00f6rmektedir.<br \/>\nPrototipi a\u015fa\u011f\u0131daki gibidir.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;repeat] | filter : &#x5B;De\u011fer] : &#x5B;true\/false]\r\n<\/pre>\n<p>Repeat edilen veri k\u00fcmesinin yan\u0131na &#8220;|&#8221; operat\u00f6r\u00fc e\u015fli\u011finde filter komutu ile de\u011fer verilmekte ve bu de\u011fere e\u015fle\u015fen kay\u0131tlar listelenmektedir. E\u015fle\u015fmede, de\u011ferin veri listesindeki herhangi bir kolondaki de\u011feriyle uyumlu olmas\u0131 varsay\u0131lm\u0131\u015ft\u0131r. Bir kolona \u00f6zel filtreleme i\u015flemide ger\u00e7ekle\u015ftirilebilir. true\/false olarak tarif edilen parametre ise; filtreleme esnas\u0131nda verilerin de\u011feri kapsamas\u0131 m\u0131?(false) yoksa birebir e\u015fit olmas\u0131 m\u0131?(true) gerekti\u011fini belirtmektedir.<\/p>\n<p>\u015eimdi gelin g\u00fczel bir \u00f6rnekle konuyu ele alal\u0131m.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n        angular.module(&quot;FilterModule&quot;, &#x5B;]).controller(&quot;FilterController&quot;, function ($scope) {\r\n            var PersonelListesi =\r\n                &#x5B;\r\n                    { Adi: &quot;Gen\u00e7ay&quot;, SoyAdi: &quot;Y\u0131ld\u0131z&quot;, Yas: 26, Memleket: &quot;Artvin&quot; },\r\n                    { Adi: &quot;Mustafa&quot;, SoyAdi: &quot;Klavuz&quot;, Yas: 25, Memleket: &quot;Ankara&quot; },\r\n                    { Adi: &quot;Ay\u015fe&quot;, SoyAdi: &quot;Hotin&quot;, Yas: 31, Memleket: &quot;Mersin&quot; },\r\n                    { Adi: &quot;Nurettin&quot;, SoyAdi: &quot;Uzunsakal&quot;, Yas: 54, Memleket: &quot;\u00c7orum&quot; },\r\n                    { Adi: &quot;Song\u00fcl&quot;, SoyAdi: &quot;Fitoz&quot;, Yas: 24, Memleket: &quot;Artvin&quot; },\r\n                    { Adi: &quot;Fatma&quot;, SoyAdi: &quot;Y\u0131ld\u0131z&quot;, Yas: 23, Memleket: &quot;Ayd\u0131n&quot; },\r\n                    { Adi: &quot;G\u00fcrol&quot;, SoyAdi: &quot;Y\u0131ld\u0131z&quot;, Yas: 38, Memleket: &quot;Artvin&quot; },\r\n                ];\r\n            $scope.personelListesi = PersonelListesi;\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;FilterModule&quot; ng-controller=&quot;FilterController&quot;&gt;\r\n    &lt;input type=&quot;text&quot; placeholder=&quot;Filtre de\u011feri&quot; ng-model=&quot;arama&quot; \/&gt;\r\n    &lt;table&gt;\r\n        &lt;thead&gt;\r\n            &lt;tr&gt;\r\n                &lt;th&gt;Ad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Soyad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Ya\u015f\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Memleketi&lt;\/th&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/thead&gt;\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | filter : arama&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n    &lt;\/table&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Yukar\u0131daki \u00f6rnek kod blo\u011funda personel listesi repeat edildi\u011fi noktada inputa ba\u011flanan &#8220;arama&#8221; isimli model sayesinde filtrelendirilmektedir.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler.gif\" alt=\"AngularJS&#039;de Filtreler - Filter\" width=\"252\" height=\"224\" class=\"aligncenter size-full wp-image-7087\" \/><\/a><br \/>\nBu \u015fekilde filtreleme bir kolona \u00f6zel yap\u0131lmamaktad\u0131r. E\u011fer ki kolona \u00f6zel filtreleme yapmak istiyorsan\u0131z inputa ba\u011fl\u0131 olan modele kolonun ad\u0131n\u0131 property olarak eklemek yeterli olacakt\u0131r.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\n&lt;body ng-app=&quot;FilterModule&quot; ng-controller=&quot;FilterController&quot;&gt;\r\n    &lt;input type=&quot;text&quot; placeholder=&quot;Filtre de\u011feri&quot; ng-model=&quot;arama.Adi&quot; \/&gt;\r\n    &lt;table&gt;\r\n        &lt;thead&gt;\r\n            &lt;tr&gt;\r\n                &lt;th&gt;Ad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Soyad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Ya\u015f\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Memleketi&lt;\/th&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/thead&gt;\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | filter : arama&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n    &lt;\/table&gt;\r\n&lt;\/body&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-1.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-1.gif\" alt=\"AngularJS&#039;de Filtreler - Filter\" width=\"252\" height=\"224\" class=\"aligncenter size-full wp-image-7089\" \/><\/a><br \/>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere bu \u015fekilde bir sadece &#8220;Adi&#8221; kolonuna \u00f6zel bir filtreleme ger\u00e7ekle\u015ftirilmektedir.<\/p>\n<p>\u015eu ana kadar yapt\u0131\u011f\u0131m\u0131z filtrelemelerde yaz\u0131lan de\u011feri kapsayan i\u00e7erikler filtrelenmi\u015ftir. Ayr\u0131ca verilen de\u011fere birebir e\u015fit olan de\u011ferlerin filtrelenmesini istiyorsak bool tipindeki \u00fc\u00e7\u00fcnc\u00fc parametremiz devreye girmektedir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;body ng-app=&quot;FilterModule&quot; ng-controller=&quot;FilterController&quot;&gt;\r\n    &lt;input type=&quot;text&quot; placeholder=&quot;Filtre de\u011feri&quot; ng-model=&quot;arama&quot; \/&gt;\r\n    &lt;table&gt;\r\n        &lt;thead&gt;\r\n            &lt;tr&gt;\r\n                &lt;th&gt;Ad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Soyad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Ya\u015f\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Memleketi&lt;\/th&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/thead&gt;\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | filter : arama : true&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n    &lt;\/table&gt;\r\n&lt;\/body&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-2.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-2.gif\" alt=\"AngularJS&#039;de Filtreler - Filter\" width=\"252\" height=\"224\" class=\"aligncenter size-full wp-image-7091\" \/><\/a><br \/>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere de\u011fer direkt kolondaki de\u011ferle birebir e\u015f de\u011fer olmad\u0131\u011f\u0131 m\u00fcddet\u00e7e herhangi bir veri g\u00f6sterilmemektedir. Buradan da anlayaca\u011f\u0131m\u0131z bu \u00fc\u00e7\u00fcnc\u00fc parametrenin varsay\u0131lan olarak false de\u011ferine sahip oldu\u011fudur.<\/p>\n<p>Ve son olarak birden fazla de\u011fer \u00fczerinde bir filtreleme i\u015flemi yapmak istiyorsak e\u011fer a\u015fa\u011f\u0131daki gibi nesne \u00fczerinden hareket edebiliriz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;body ng-app=&quot;FilterModule&quot; ng-controller=&quot;FilterController&quot;&gt;\r\n    &lt;input type=&quot;text&quot; placeholder=&quot;Filtre de\u011feri - Ad\u0131&quot; ng-model=&quot;adi&quot; \/&gt;\r\n    &lt;input type=&quot;text&quot; placeholder=&quot;Filtre de\u011feri - Memleketi&quot; ng-model=&quot;memleket&quot; \/&gt;\r\n    &lt;table&gt;\r\n        &lt;thead&gt;\r\n            &lt;tr&gt;\r\n                &lt;th&gt;Ad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Soyad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Ya\u015f\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Memleketi&lt;\/th&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/thead&gt;\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | filter : {Adi: adi, Memleket: memleket} : false&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n    &lt;\/table&gt;\r\n&lt;\/body&gt;\r\n<\/pre>\n<p>Dikkat ederseniz &#8220;filter&#8221; komutuna sadece &#8220;Adi&#8221; ve &#8220;Memleket&#8221; propertylerinden olu\u015fan bir nesne verilmektedir ve ilgili nesne property de\u011ferlerini inputlara ba\u011flanan modellerden almaktad\u0131r.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-3.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-3.gif\" alt=\"AngularJS&#039;de Filtreler - Filter\" width=\"308\" height=\"224\" class=\"aligncenter size-full wp-image-7095\" \/><\/a><br \/>\nBu \u015fekilde de birden \u00e7ok alana ve birden \u00e7ok de\u011ferle filtreleme i\u015flemi uygulam\u0131\u015f olmaktay\u0131z.<\/p>\n<h3><span style=\"color: #ff0000;\">Lowercase Filtresi<\/span><\/h3>\n<p>Elimizdeki metinsel ifadelerin t\u00fcm karakterlerini k\u00fc\u00e7\u00fcltme i\u015flevi g\u00f6rmektedir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;&quot;&gt;\r\n    &lt;input type=&quot;text&quot; ng-model=&quot;Deger&quot; \/&gt;\r\n    &lt;br \/&gt;\r\n    {{Deger | lowercase}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-4.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-4.gif\" alt=\"AngularJS&#039;de Filtreler - Lowercase\" width=\"164\" height=\"74\" class=\"aligncenter size-full wp-image-7100\" \/><\/a><\/p>\n<h3><span style=\"color: #ff0000;\">Uppercase Filtresi<\/span><\/h3>\n<p>Benzer \u015fekilde elimizdeki metinsel ifadenin t\u00fcm karakterlerini b\u00fcy\u00fck olacak \u015fekilde bi\u00e7imlendirir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;&quot;&gt;\r\n    &lt;input type=&quot;text&quot; ng-model=&quot;Deger&quot; \/&gt;\r\n    &lt;br \/&gt;\r\n    {{Deger | uppercase}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-5.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-5.gif\" alt=\"AngularJS&#039;de Filtreler - Uppercase\" width=\"164\" height=\"74\" class=\"aligncenter size-full wp-image-7102\" \/><\/a><\/p>\n<h3><span style=\"color: #ff0000;\">Order By Filtresi<\/span><\/h3>\n<p>Bir veri k\u00fcmesini belirli bir kolona\/alana g\u00f6re s\u0131ralamak i\u00e7in kullan\u0131l\u0131r.<br \/>\nPrototipi a\u015fa\u011f\u0131daki gibidir.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;repeat] | orderBy : &#x5B;Kolon\/Alan] : &#x5B;true\/false ya da +\/-]\r\n<\/pre>\n<p>Repeat komutuna &#8220;|&#8221; operat\u00f6r\u00fc e\u015fli\u011finde belirtilen orderBy komutu sayesinde hangi kolona\/alana g\u00f6re s\u0131ralama yapaca\u011f\u0131m\u0131z\u0131 belirleyebilmekteyiz. true\/false olarak belirtti\u011fim \u00fc\u00e7\u00fcnc\u00fc parametrede ise yap\u0131lacak s\u0131ralaman\u0131n artan m\u0131?(false) ya da azalan m\u0131?(true) olarak ayarlanmas\u0131n\u0131 sa\u011flamaktad\u0131r. Tabi bu i\u015flemler i\u00e7in de &#8220;+&#8221; veya &#8220;-&#8221; operat\u00f6rleride ayn\u0131 manay\u0131 ifade etmektedir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n        angular.module(&quot;FilterModule&quot;, &#x5B;]).controller(&quot;FilterController&quot;, function ($scope) {\r\n            var PersonelListesi =\r\n                &#x5B;\r\n                    { Adi: &quot;Gen\u00e7ay&quot;, SoyAdi: &quot;Y\u0131ld\u0131z&quot;, Yas: 26, Memleket: &quot;Artvin&quot; },\r\n                    { Adi: &quot;Mustafa&quot;, SoyAdi: &quot;Klavuz&quot;, Yas: 25, Memleket: &quot;Ankara&quot; },\r\n                    { Adi: &quot;Ay\u015fe&quot;, SoyAdi: &quot;Hotin&quot;, Yas: 31, Memleket: &quot;Mersin&quot; },\r\n                    { Adi: &quot;Nurettin&quot;, SoyAdi: &quot;Uzunsakal&quot;, Yas: 54, Memleket: &quot;\u00c7orum&quot; },\r\n                    { Adi: &quot;Song\u00fcl&quot;, SoyAdi: &quot;Fitoz&quot;, Yas: 24, Memleket: &quot;Artvin&quot; },\r\n                    { Adi: &quot;Fatma&quot;, SoyAdi: &quot;Y\u0131ld\u0131z&quot;, Yas: 23, Memleket: &quot;Ayd\u0131n&quot; },\r\n                    { Adi: &quot;G\u00fcrol&quot;, SoyAdi: &quot;Y\u0131ld\u0131z&quot;, Yas: 38, Memleket: &quot;Artvin&quot; },\r\n                ];\r\n            $scope.personelListesi = PersonelListesi;\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;FilterModule&quot; ng-controller=&quot;FilterController&quot;&gt;\r\n    &lt;table&gt;\r\n        &lt;thead&gt;\r\n            &lt;tr&gt;\r\n                &lt;th&gt;Ad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Soyad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Ya\u015f\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Memleketi&lt;\/th&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/thead&gt;\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | orderBy : 'Adi'&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n    &lt;\/table&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer personeller listesi &#8220;Adi&#8221; kolonuna \u00f6zel s\u0131ralanmaktad\u0131r.<br \/>\nBirden fazla kolon \u00fczerinde s\u0131ralamay\u0131 ise a\u015fa\u011f\u0131daki gibi yapabilmekteyiz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | orderBy : &#x5B;'Memleket', 'Adi']&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n<\/pre>\n<p>S\u0131ralaman\u0131n artan ya da azalan oldu\u011funu da a\u015fa\u011f\u0131daki gibi belirtmekteyiz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | orderBy : 'Adi' : true&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n<\/pre>\n<p>Tabi bu i\u015flemi s\u0131ralama yap\u0131lacak kolon ad\u0131n\u0131n ba\u015f\u0131na &#8220;+&#8221; ya da &#8220;-&#8221; ifadelerini kullanarakta ger\u00e7ekle\u015ftirebiliriz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | orderBy : '-Adi'&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n<\/pre>\n<h3><span style=\"color: #ff0000;\">Number Filtresi<\/span><\/h3>\n<p>Say\u0131sal ifadeleri ondal\u0131kl\u0131 hale getirmekte ve noktal\u0131 bir \u015fekilde bi\u00e7imlendirmektedir.<br \/>\nPrototipi a\u015fa\u011f\u0131daki gibidir.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;Say\u0131sal De\u011fer] | number : &#x5B;K\u00fcs\u00fcrat]\r\n<\/pre>\n<p>Say\u0131sal de\u011fer, uygulanan number komutu ile ondal\u0131kl\u0131 \u015fekilde bi\u00e7imlendirilmektedir ve k\u00fcs\u00fcrat\u0131 da istedi\u011fimiz \u015fekilde ayarlanmaktad\u0131r.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;&quot;&gt;\r\n    {{21313432 | number}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-Number.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-Number.png\" alt=\"AngularJS&#039;de Filtreler - Number\" width=\"83\" height=\"28\" class=\"aligncenter size-full wp-image-7108\" \/><\/a><br \/>\nK\u00fcs\u00fcrat verdi\u011fimizde ise;<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;&quot;&gt;\r\n    {{21313432 | number : 2}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-Number-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-Number-1.png\" alt=\"AngularJS&#039;de Filtreler - Number\" width=\"108\" height=\"35\" class=\"aligncenter size-full wp-image-7110\" \/><\/a><\/p>\n<h3><span style=\"color: #ff0000;\">Date Filtresi<\/span><\/h3>\n<p>Tarihsel de\u011ferleri bi\u00e7imlendirmek i\u00e7in kullan\u0131lmaktad\u0131r. A\u015fa\u011f\u0131da formatlama i\u00e7in belli ba\u015fl\u0131 komutlar verilmi\u015ftir. T\u00fcm format yap\u0131s\u0131n\u0131 incelemek istiyorsan\u0131z <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/filter\/date\" rel=\"noopener\" target=\"_blank\">\u015furadaki<\/a> d\u00f6k\u00fcman\u0131 incelemenizi tavsiye ederim.<\/p>\n<table>\n<thead>\n<tr>\n<th>Bi\u00e7im<\/th>\n<th>\u00c7\u0131kt\u0131<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>yyyy<\/td>\n<td>D\u00f6rt basamakl\u0131 y\u0131l. \u00d6rn; 2018<\/td>\n<\/tr>\n<tr>\n<td>yy<\/td>\n<td>\u0130ki basamakl\u0131 y\u0131l. \u00d6rn; 2018<\/td>\n<\/tr>\n<tr>\n<td>MMMM<\/td>\n<td>Metinsel ay. \u00d6rn; January<\/td>\n<\/tr>\n<tr>\n<td>MMm<\/td>\n<td>Say\u0131sal ay. S\u0131f\u0131rl\u0131. \u00d6rn; 09<\/td>\n<\/tr>\n<tr>\n<td>M<\/td>\n<td>Say\u0131sal ay. S\u0131f\u0131rs\u0131z. \u00d6rn; 9<\/td>\n<\/tr>\n<tr>\n<td>dd<\/td>\n<td>G\u00fcn. S\u0131f\u0131rl\u0131. \u00d6rn; 03<\/td>\n<\/tr>\n<tr>\n<td>d<\/td>\n<td>G\u00fcn. S\u0131f\u0131zs\u0131z. \u00d6rn; 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Kullan\u0131m prototipi a\u015fa\u011f\u0131daki \u015fekildedir.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;Tarih] : date : &#x5B;Format]\r\n<\/pre>\n<p>\u015eimdi a\u015fa\u011f\u0131daki \u00f6rne\u011fi inceleyiniz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n        angular.module(&quot;Uygulama&quot;, &#x5B;]).controller(&quot;UygulamaController&quot;, function ($scope) {\r\n            $scope.Tarih = new Date();\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;Uygulama&quot; ng-controller=&quot;UygulamaController&quot;&gt;\r\n    {{Tarih | date}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Sonu\u00e7 olarak o an\u0131n tarihini d\u00fczg\u00fcn formatta yazd\u0131racakt\u0131r.<br \/>\nYa da a\u015fa\u011f\u0131daki gibi kendi format\u0131m\u0131z\u0131 da olu\u015fturabiliriz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n        angular.module(&quot;Uygulama&quot;, &#x5B;]).controller(&quot;UygulamaController&quot;, function ($scope) {\r\n            $scope.Tarih = new Date();\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;Uygulama&quot; ng-controller=&quot;UygulamaController&quot;&gt;\r\n    {{Tarih | date : &quot;dd.MM.y&quot;}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Format\u0131n ba\u015f\u0131na herhangi bir ekte ekleyebiliriz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n        angular.module(&quot;Uygulama&quot;, &#x5B;]).controller(&quot;UygulamaController&quot;, function ($scope) {\r\n            $scope.Tarih = new Date();\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;Uygulama&quot; ng-controller=&quot;UygulamaController&quot;&gt;\r\n    {{Tarih | date : &quot;'Bu g\u00fcn\u00fcn tarihi : ' dd.MM.y&quot;}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-3.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-3.png\" alt=\"AngularJS&#039;de Filtreler - Date\" width=\"194\" height=\"27\" class=\"aligncenter size-full wp-image-7115\" \/><\/a><br \/>\nT\u00fcm bunlar\u0131n d\u0131\u015f\u0131nda &#8220;fullDate&#8221; parametresini kullanarak elimizdeki tarihin t\u00fcm bilgilerini bi\u00e7imlendirebiliriz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n        angular.module(&quot;Uygulama&quot;, &#x5B;]).controller(&quot;UygulamaController&quot;, function ($scope) {\r\n            $scope.Tarih = new Date();\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;Uygulama&quot; ng-controller=&quot;UygulamaController&quot;&gt;\r\n    {{Tarih | date : &quot;fullDate&quot;}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h3><span style=\"color: #ff0000;\">LimitTo Filtresi<\/span><\/h3>\n<p>Elimizdeki veri k\u00fcmesini listelerken ba\u015ftan ya da sondan ka\u00e7 adedini bu listelemeye dahil edece\u011fimizi belirtiyoruz.<br \/>\nPrototipi a\u015fa\u011f\u0131daki gibidir.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;Repeat] | limitTo : &#x5B;Adet] : &#x5B;Ba\u015flang\u0131\u00e7]\r\n<\/pre>\n<p>Repeat esnas\u0131nda limitTo ile belirtilen adet kadar veri listelenecektir. Ba\u015flang\u0131\u00e7 de\u011feri ise atlanacak noktay\u0131 ifade etmektedir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n        angular.module(&quot;FilterModule&quot;, &#x5B;]).controller(&quot;FilterController&quot;, function ($scope) {\r\n            var PersonelListesi =\r\n                &#x5B;\r\n                    { Adi: &quot;Gen\u00e7ay&quot;, SoyAdi: &quot;Y\u0131ld\u0131z&quot;, Yas: 26, Memleket: &quot;Artvin&quot; },\r\n                    { Adi: &quot;Mustafa&quot;, SoyAdi: &quot;Klavuz&quot;, Yas: 25, Memleket: &quot;Ankara&quot; },\r\n                    { Adi: &quot;Ay\u015fe&quot;, SoyAdi: &quot;Hotin&quot;, Yas: 31, Memleket: &quot;Mersin&quot; },\r\n                    { Adi: &quot;Nurettin&quot;, SoyAdi: &quot;Uzunsakal&quot;, Yas: 54, Memleket: &quot;\u00c7orum&quot; },\r\n                    { Adi: &quot;Song\u00fcl&quot;, SoyAdi: &quot;Fitoz&quot;, Yas: 24, Memleket: &quot;Artvin&quot; },\r\n                    { Adi: &quot;Fatma&quot;, SoyAdi: &quot;Y\u0131ld\u0131z&quot;, Yas: 23, Memleket: &quot;Ayd\u0131n&quot; },\r\n                    { Adi: &quot;G\u00fcrol&quot;, SoyAdi: &quot;Y\u0131ld\u0131z&quot;, Yas: 38, Memleket: &quot;Artvin&quot; },\r\n                ];\r\n            $scope.personelListesi = PersonelListesi;\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;FilterModule&quot; ng-controller=&quot;FilterController&quot;&gt;\r\n    &lt;table&gt;\r\n        &lt;thead&gt;\r\n            &lt;tr&gt;\r\n                &lt;th&gt;Ad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Soyad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Ya\u015f\u0131&lt;\/th&gt;\r\n                &lt;th&gt;Memleketi&lt;\/th&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/thead&gt;\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | limitTo : 3&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n    &lt;\/table&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-4.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-4.png\" alt=\"AngularJS&#039;de Filtreler - limitTo\" width=\"229\" height=\"106\" class=\"aligncenter size-full wp-image-7117\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-4.png 229w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-4-980x450.png 980w\" sizes=\"auto, (max-width: 229px) 100vw, 229px\" \/><\/a><br \/>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi personel listesinin ilk \u00fc\u00e7 sat\u0131r\u0131 listelemeye dahil edilmi\u015ftir.<br \/>\nE\u011fer ki listelemeye sondan m\u00fcdahale etmek istiyorsan\u0131z parametreye verilen say\u0131sal de\u011ferin ba\u015f\u0131na &#8220;-&#8221; ifadesi konmal\u0131d\u0131r.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | limitTo : -3&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-5.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-5.png\" alt=\"AngularJS&#039;de Filtreler - limitTo\" width=\"210\" height=\"103\" class=\"aligncenter size-full wp-image-7118\" \/><\/a><br \/>\nE\u011fer ki belirli sat\u0131rlar\u0131 atlay\u0131p limit belirlemek istiyorsak \u00fc\u00e7\u00fcnc\u00fc parametre burada devreye girmektedir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n        &lt;tbody&gt;\r\n            &lt;tr ng-repeat=&quot;Personel in personelListesi | limitTo : 2 : 4&quot;&gt;\r\n                &lt;td&gt;{{Personel.Adi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.SoyAdi}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Yas}}&lt;\/td&gt;\r\n                &lt;td&gt;{{Personel.Memleket}}&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-6.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-6.png\" alt=\"AngularJS&#039;de Filtreler - limitTo\" width=\"214\" height=\"75\" class=\"aligncenter size-full wp-image-7120\" \/><\/a><br \/>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, d\u00f6rd\u00fcnc\u00fc sat\u0131ra kadar atlay\u0131p sonraki iki adet sat\u0131r\u0131 yazd\u0131rm\u0131\u015f bulunmaktay\u0131z.<\/p>\n<p>limitTo filtresini metinsel yap\u0131lar \u00fczerinde de uygulayabilmekteyiz. Nihayetinde yaz\u0131l\u0131msal a\u00e7\u0131dan her metinsel ifade bir char dizisi oldu\u011fundan dolay\u0131 bu ve bu tarz i\u015flemleri metinsel ifadelerde kullanabilmekteyiz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n        angular.module(&quot;FilterModule&quot;, &#x5B;]).controller(&quot;FilterController&quot;, function ($scope) {\r\n            $scope.Ad = &quot;Gen\u00e7Ay Y\u0131ld\u0131z&quot;;\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;FilterModule&quot; ng-controller=&quot;FilterController&quot;&gt;\r\n    {{Ad | limitTo : 9 : 4}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-7.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-7.png\" alt=\"AngularJS&#039;de Filtreler- limitTo\" width=\"78\" height=\"26\" class=\"aligncenter size-full wp-image-7123\" \/><\/a><\/p>\n<h3><span style=\"color: #ff0000;\">JSON Filtresi<\/span><\/h3>\n<p>Bir nesneyi JSON format\u0131nda bi\u00e7imlendirmemizi sa\u011flamaktad\u0131r.<br \/>\nPrototipi a\u015fa\u011f\u0131daki gibidir.<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;Nesne] | json : &#x5B;Aral\u0131k De\u011feri]\r\n<\/pre>\n<p>Prototipte tek anla\u015f\u0131lmayan husus aral\u0131k de\u011feri olsa gerek ki onunda i\u015flevi, olu\u015fturulacak json de\u011ferinde ilgili \u00f6zelliklerin ne kadar sa\u011f tarafa at\u0131lmas\u0131yla ilgilidir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;script src=&quot;~\/Scripts\/angular.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n        angular.module(&quot;FilterModule&quot;, &#x5B;]).controller(&quot;FilterController&quot;, function ($scope) {\r\n            var Model = {\r\n                Adi: &quot;Gen\u00e7ay&quot;,\r\n                SoyAdi: &quot;Y\u0131ld\u0131z&quot;,\r\n                Memleket: &quot;Artvin&quot;\r\n            };\r\n            $scope.Model = Model;\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=&quot;FilterModule&quot; ng-controller=&quot;FilterController&quot;&gt;\r\n    {{Model | json}}\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-8.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-8.png\" alt=\"AngularJS&#039;de Filtreler - JSON\" width=\"420\" height=\"28\" class=\"aligncenter size-full wp-image-7125\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-8.png 420w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2018\/03\/AngularJSde-Filtreler-8-300x20.png 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/a><\/p>\n<p>Evet arkada\u015flar,<br \/>\nAngularJS framework\u00fcnde kullanaca\u011f\u0131m\u0131z filtreler \u00fczerinde elimden geldi\u011fince detayl\u0131 a\u00e7\u0131klamalarda bulunmaya \u00e7al\u0131\u015ft\u0131m. E\u011fer ki sizlerde bu yaz\u0131y\u0131 sonuna kadar okuyabilme c\u00fcretini g\u00f6sterdiyseniz te\u015fekk\u00fcrlerimi sunar\u0131m \ud83d\ude42<\/p>\n<p>Bol bol faydalanman\u0131z dile\u011fiyle&#8230;<br \/>\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere&#8230;<br \/>\n\u0130yi \u00e7al\u0131\u015fmalar&#8230;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Merhaba, Bu i\u00e7eri\u011fimizde elimizdeki veriler \u00fczerinde belirli filtreleme yapabilme imkan\u0131 sa\u011flayan y\u00f6nergeler \u00fczerinde konu\u015faca\u011f\u0131z. AngularJS&#8217;de kullanaca\u011f\u0131m\u0131z filtreler \u015funlard\u0131r; Currency Say\u0131sal bir de\u011feri d\u00f6viz kuru olarak bi\u00e7imlendirmek i\u00e7in kullan\u0131lmaktad\u0131r. Varsay\u0131lan olarak $(dolar) sembol\u00fcd\u00fcr ve bunun&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":7002,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2022],"tags":[2093,2080,2088,2085,2084,2081,2087,2094,530,2096,2086,2095,2082,2089,1575,2092,74,2091,2083,2090],"class_list":["post-7072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angularjs-date-fulldate","tag-currency","tag-currency-filteresi","tag-currency-filtresi","tag-date","tag-filter","tag-filter-filteresi","tag-fulldate-filter","tag-json","tag-json-filtresi","tag-limitto","tag-limitto-filtresi","tag-lowercase","tag-lowercase-filtresi","tag-number","tag-number-filtresi","tag-order-by","tag-order-by-filtresi","tag-uppercase","tag-uppercase-filtresi"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=7072"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7072\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7002"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}