< AngularJS

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.

<!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