Angular szűrők

Szerző: Sallai András
Copyright © Sallai András, 2017
Licenc: GNU Free Documentation License 1.3
Web: https://szit.hu

Az Angular szűrőkről

Az Angular szűrője, angolosan filter. Pénznemeket is beállíthatunk általa, de valódi szűrőként is használhatjuk.

Szűrés beviteli mezők alapján

<!doctype html>
<html ng-app="parkolas">
<head>
 
<script src="angular.min.js"></script>
 
<script>
var parkolas = angular.module("parkolas", []);
parkolas.controller("parkolasCtrl", function($scope) {
  $scope.kocsik = [
    {rendszam: "ABC-123", tulaj: "Nagy János"}, 
    {rendszam: "ACE-456", tulaj: "Erős Béla"},
    {rendszam: "ABG-456", tulaj: "Csontos Géza"},
    {rendszam: "BCE-456", tulaj: "Lápos István"},
    {rendszam: "BCE-456", tulaj: "Nyolcas Teréz"},
    {rendszam: "DCE-456", tulaj: "Hasáb Ferenc"},
  ];
});
</script>
</head>
<body ng-controller="parkolasCtrl">
 
Rendszám: <input type="text" ng-model="searchBox.rendszam"><br>
Tulajdonos: <input type="text" ng-model="searchBox.tulaj">
 
<table>
  <tr ng-repeat="kocsi in kocsik | filter: searchBox">
    <td>{{kocsi.rendszam}}</td>
    <td>{{kocsi.tulaj}}</td>    
  </tr>  
</table>
 
</body>
</html>

Saját szűrő

Ebben a példában az árak alapján úgy szeretnénk szűrni, hogy a beírt összegnél kisebb ár esetén szeretnénk látni a sorokat.

index.html

<!doctype html>
<html ng-app="parkolas">
<head>
 
  <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
 
<script>
var parkolas = angular.module("parkolas", []);
parkolas.controller("parkolasCtrl", function($scope) {
  $scope.kocsik = [
    {
      rendszam: "ABC-123", 
      tulaj: "Nagy János",
      ar: 870000
    },{
      rendszam: "ACE-456", 
      tulaj: "Erős Béla",
      ar: 485000
    },{
      rendszam: "ABG-456", 
      tulaj: "Csontos Géza",
      ar: 379000
    },{
      rendszam: "BCE-456", 
      tulaj: "Lápos István",
      ar: 817000
    },{
      rendszam: "BCE-456", 
      tulaj: "Nyolcas Teréz",
      ar: 730000
    },{
      rendszam: "DCE-456", 
      tulaj: "Hasáb Ferenc",
      ar: 620000
    }
  ];
});
 
parkolas.filter("nagyobb", function(){
  return function (items, searchBox) {
    var filtered = [];
         for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item.ar<searchBox.ar) {
                filtered.push(item);
            }
        }
    return filtered;
  };
});
</script>
</head>
<body ng-controller="parkolasCtrl">
 
<table>
  <tr>
    <th>Rendszám</th>
    <th>Név</th>
    <th>Ár (kevesebb mint)</th>
  </tr>
  <tr>
    <td>
    <input type="text" ng-model="searchBox.rendszam">
    </td>
    <td>
      <input type="text" ng-model="searchBox.tulaj">
    </td>
    <td>
      <input type="text" ng-model="searchBox.ar">
    </td>
  </tr>
</table>
 
<table>
  <tr ng-repeat="kocsi in kocsik | nagyobb:searchBox">
    <td>{{kocsi.rendszam}}</td>
    <td>{{kocsi.tulaj}}</td>
    <td>{{kocsi.ar}}</td>
  </tr>  
</table>
 
 
</body>
</html>

JSBin