Veriler kullanıcıya gösterme sırasında filtreleme imkanı tanımaktadır.
Filtreleme yapmak istediğimiz alanın yanına pipe (|) simgesini yerleştirmemiz gerekir
Angularjs ile gelen filtreleme araçlarına yapısal filtreler denir, bunların dışında kendi filtremizi yapmak istersek, bu filtrelerede custom filtre denir
Pipe (|) işareti expression’a filtre yapmak istediğini belirtir.
uppercase/lowercase
<html>
<head>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body
ng-app>
<input
type="text"
ng-model="name"
ng_init="name='Esra SALMAN'">
<h3>büyük: {{name | uppercase}}</h3>
<h3>küçük: {{name | lowercase}}</h3>
</body>
</html>
Currency
<!DOCTYPE
html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body
ng-app>
<input type="text"
ng-model="para"
ng_init="para=130">
<h3>
Para: {{para | currency}}</h3>
</body>
</html>
Currency(TL)
Dil ayarlarını değiştirmemiz gerekir.burda bulunan adresteki javascript komutlarnı bir dosyaya kaydedip projenize dahil edin
<html>
<head>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<script
src="angular-locale_tr-tr.js"></script>
</head>
<body
ng-app>
<input
type="text"
ng-model="para"
ng_init="para=130">
<h3> Para: {{para | currency}}</h3>
</body>
</html>
Orderby
<html
>
<head>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body
ng-app="MyApp">
<div
ng-controller="MyFirstController">
<table >
<tr>
<td>Ders</td>
<td>Sınıf</td>
<td>Kontenjan</td>
</tr>
<tr ng-repeat="kurs in kurslar | orderBy:'kontenjan' ">
<td>{{kurs.ders}}</td>
<td>{{kurs.sinif}}</td>
<td>{{kurs.kontenjan}}</td>
</tr>
</table>
</div>
<script>
var myApp = angular.module('MyApp', [])
.controller('MyFirstController', ['$scope',
function($scope) {
$scope.kurslar = [
{ ders: 'Angularjs', sinif: '2S', kontenjan: 12 },
{ ders: 'c#', sinif: '4S', kontenjan: 30 },
{ ders: 'Oracle', sinif: '11S', kontenjan:32},
{ ders: 'Sql
Server', sinif:
'1S', kontenjan: 24 },
{ ders: 'python', sinif: '6S', kontenjan: 16} ];
}]);
</script>
</body>
</html>
İlk önce kontenjana göre daha sonra kontan içerisindekileri de derslere göre sıralama:
<tr
ng-repeat="kurs in kurslar | orderBy:'ders' | orderBy:'kontenjan'">
Alıştırma:
<!DOCTYPE
html>
<html
>
<head>
<meta
charset="utf-8"
/>
<title>Sutuna
Göre Sırala</title>
<script
src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body>
<table
ng-app="SutunSirala"
ng-controller="SiralaCtrl">
<thead>
<tr>
<td><a
href="#"
ng-click="sirala('ders')">
Ders </a></td>
<td><a
href="#"
ng-click="sirala('sinif')">
Sınıf </a></td>
<td><a
href="#"
ng-click="sirala('kontenjan')">
Kontenjan </a></td>
</tr>
</thead>
<tbody>
<tr
ng-repeat="kurs
in kurslar | orderBy:filtreSirala">
<td>{{kurs.ders}}</td>
<td>{{kurs.sinif}}</td>
<td>{{kurs.kontenjan}}</td>
</tr>
</tbody>
</table>
<script>
var
app
= angular.module('SutunSirala',
[]);
app.controller('SiralaCtrl',
function($scope)
{
$scope.kurslar
= [
{ders:
'Angularjs',
sinif:
'2S', kontenjan: 12 },
{
ders: 'c#', sinif:
'4S', kontenjan: 30 },
{
ders: 'Oracle',
sinif:
'11S', kontenjan: 32 },
{
ders: 'Sql
Server', sinif:
'1S', kontenjan: 24 },
{
ders: 'python',
sinif:
'6S', kontenjan: 16 }
];
$scope.sirala
= function(secilenBaslik){
$scope.filtreSirala=secilenBaslik;
}
});
</script>
</body>
</html>
limitTo
<html
>
<head>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body
ng-app="MyApp">
<div
ng-controller="MyFirstController">
limit: <input
type="text"
ng-model="sayiLimiti">
<table >
<tr> <td>Ders</td> <td>Sınıf</td> <td>Kontenjan</td> </tr>
<tr
ng-repeat="kurs in kurslar |
limitTo:sayiLimiti">
<td>{{kurs.ders}}</td>
<td>{{kurs.sinif}}</td>
<td>{{kurs.kontenjan}}</td>
</tr>
</table>
</div>
<script>
var myApp = angular.module('MyApp', [])
.controller('MyFirstController', ['$scope',
function($scope) {
$scope.kurslar = [
{ ders: 'Angularjs', sinif: '2S', kontenjan: 12 }, { ders:
'c#', sinif: '4S', kontenjan: 30 },
{ ders: 'Oracle', sinif: '11S', kontenjan:32}, { ders:
'Sql
Server', sinif:
'1S', kontenjan: 24 },
{ ders: 'python', sinif: '6S', kontenjan: 16} ]; }]);
</script>
</body>
</html>
Limit Örnek:
Alfabetik
olarak son dersi getiren angular kod
Ekran Çıktısı:
Hiç yorum yok:
Yorum Gönder