Φίλτρα AngularJS & Προσαρμοσμένο φίλτρο AngularJS με Παράδειγμα

Τι είναι το φίλτρο στο AngularJS;

A Φιλτράρισμα στο AngularJS βοηθά στη μορφοποίηση της τιμής μιας έκφρασης για εμφάνιση στον χρήστη χωρίς αλλαγή της αρχικής μορφής. Για παράδειγμα, εάν θέλετε η συμβολοσειρά σας με πεζά ή κεφαλαία, μπορείτε να το κάνετε χρησιμοποιώντας φίλτρα. Υπάρχουν ενσωματωμένα φίλτρα όπως «πεζά», «κεφαλαία», τα οποία μπορούν να ανακτήσουν τα πεζά και κεφαλαία γράμματα ανάλογα.

Προσαρμοσμένο φίλτρο AngularJS

Μερικές φορές τα ενσωματωμένα φίλτρα στο Angular δεν μπορούν να καλύψουν τις ανάγκες ή τις απαιτήσεις για φιλτράρισμα εξόδου. Σε μια τέτοια περίπτωση, μπορεί να δημιουργηθεί ένα προσαρμοσμένο φίλτρο AngularJS, το οποίο μπορεί να περάσει την έξοδο με τον απαιτούμενο τρόπο.

Ομοίως, για τους αριθμούς, μπορείτε να χρησιμοποιήσετε άλλα φίλτρα. Κατά τη διάρκεια αυτού του σεμιναρίου, θα δούμε τα διαφορετικά τυπικά ενσωματωμένα φίλτρα που είναι διαθέσιμα στο Angular.

Πώς να δημιουργήσετε προσαρμοσμένο φίλτρο στο AngularJS

Στο παρακάτω παράδειγμα προσαρμοσμένου φίλτρου AngularJS, πρόκειται να περάσουμε μια συμβολοσειρά στην προβολή από τον ελεγκτή μέσω του αντικειμένου πεδίου, αλλά δεν θέλουμε η συμβολοσειρά να εμφανίζεται ως έχει.

Θέλουμε να διασφαλίσουμε ότι κάθε φορά που εμφανίζουμε τη συμβολοσειρά, θα περνάμε ένα προσαρμοσμένο φίλτρο AngularJS, το οποίο θα προσαρτήσει μια άλλη συμβολοσειρά και θα εμφανίσει την ολοκληρωμένη συμβολοσειρά στον χρήστη.

Δημιουργήστε προσαρμοσμένο φίλτρο στο AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Επεξήγηση κώδικα

  1. Εδώ περνάμε μια συμβολοσειρά "Angular" σε μια μεταβλητή μέλους που ονομάζεται tutorial και την επισυνάπτουμε στο αντικείμενο scope.
  2. Η Angular παρέχει την υπηρεσία φίλτρου που μπορεί να χρησιμοποιηθεί για τη δημιουργία του προσαρμοσμένου φίλτρου μας. Το 'Demofilter' είναι ένα όνομα που δόθηκε στο φίλτρο μας.
  3. Αυτός είναι ο τυπικός τρόπος με τον οποίο ορίζονται προσαρμοσμένα φίλτρα στο AngularJS όπου επιστρέφεται μια συνάρτηση. Αυτή η συνάρτηση περιέχει τον προσαρμοσμένο κώδικα για τη δημιουργία του προσαρμοσμένου φίλτρου. Στη συνάρτησή μας, παίρνουμε μια συμβολοσειρά "Angular" που περνά από την προβολή μας στο φίλτρο και προσθέτουμε τη συμβολοσειρά "Tutorial" σε αυτό.
  4. Χρησιμοποιούμε το Demofilter στη μεταβλητή μέλους μας, η οποία μεταβιβάστηκε από τον ελεγκτή στην προβολή.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Δημιουργήστε προσαρμοσμένο φίλτρο στο AngularJS

Από την έξοδο,

  • Μπορεί να φανεί ότι το προσαρμοσμένο φίλτρο μας έχει εφαρμοστεί και
  • Η λέξη 'Tutorial' έχει προσαρτηθεί στο τέλος της συμβολοσειράς, η οποία πέρασε στο tutorial μεταβλητής μέλους.

Φίλτρο πεζών γραμμάτων στο AngularJS

Αυτό το φίλτρο παίρνει μια έξοδο συμβολοσειράς και μορφοποιεί τη συμβολοσειρά και εμφανίζει όλους τους χαρακτήρες της συμβολοσειράς ως πεζούς.

Ας δούμε ένα παράδειγμα φίλτρων AngularJS με την επιλογή AngularJS σε πεζά.

Στο παρακάτω παράδειγμα, θα χρησιμοποιήσουμε έναν ελεγκτή για να στείλουμε μια συμβολοσειρά σε μια προβολή μέσω του αντικειμένου scope. Στη συνέχεια, θα χρησιμοποιήσουμε ένα φίλτρο στην προβολή για να μετατρέψουμε τη συμβολοσειρά σε πεζά.

Φίλτρο πεζών γραμμάτων στο AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Επεξήγηση κώδικα

  1. Εδώ περνάμε μια συμβολοσειρά, η οποία είναι ένας συνδυασμός πεζών και κεφαλαίων χαρακτήρων σε μια μεταβλητή μέλους που ονομάζεται "tutorialName" και την επισυνάπτουμε στο αντικείμενο scope. Η τιμή της συμβολοσειράς που μεταβιβάζεται είναι "AngularJS".
  2. Χρησιμοποιούμε τη μεταβλητή μέλους "tutorialName" και βάζουμε ένα σύμβολο φίλτρου (|) που σημαίνει ότι η έξοδος πρέπει να τροποποιηθεί χρησιμοποιώντας ένα φίλτρο. Στη συνέχεια χρησιμοποιούμε τη πεζή λέξη-κλειδί για να πούμε ότι χρησιμοποιούμε το ενσωματωμένο φίλτρο για την έξοδο ολόκληρης της συμβολοσειράς με πεζά.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Φίλτρο πεζών γραμμάτων στο AngularJS

Από την έξοδο

  • Μπορεί να φανεί ότι η συμβολοσειρά "AngularJS" που μεταβιβάστηκε στη μεταβλητή tutorialName που ήταν ένας συνδυασμός πεζών και κεφαλαίων χαρακτήρων έχει εκτελεστεί.
  • Μετά την εκτέλεση, η τελική έξοδος είναι με πεζά όπως φαίνεται παραπάνω.

Φίλτρο κεφαλαίων γραμμάτων στο AngularJS

Αυτό το φίλτρο είναι παρόμοιο με το πεζό φίλτρο. η διαφορά είναι ότι παίρνει μια έξοδο συμβολοσειράς και μορφοποιεί τη συμβολοσειρά και εμφανίζει όλους τους χαρακτήρες της συμβολοσειράς με κεφαλαία.

Ας δούμε ένα παράδειγμα κεφαλαιοποίησης του φίλτρου AngularJS με την επιλογή πεζών.

Στο παρακάτω παράδειγμα κεφαλαιοποίησης AngularJS, θα χρησιμοποιήσουμε έναν ελεγκτή για να στείλουμε μια συμβολοσειρά σε μια προβολή μέσω του αντικειμένου scope. Στη συνέχεια, θα χρησιμοποιήσουμε ένα φίλτρο στην προβολή για να μετατρέψουμε τη συμβολοσειρά σε κεφαλαία.

Φίλτρο κεφαλαίων γραμμάτων στο AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Επεξήγηση κώδικα

  1. Εδώ περνάμε μια συμβολοσειρά που είναι ένας συνδυασμός πεζών και κεφαλαίων χαρακτήρων "Angular JS" σε μια μεταβλητή μέλους που ονομάζεται "tutorialName" και την επισυνάπτουμε στο αντικείμενο scope.
  2. Χρησιμοποιούμε τη μεταβλητή μέλους "tutorialName" και βάζουμε ένα σύμβολο φίλτρου (|), που σημαίνει ότι η έξοδος πρέπει να τροποποιηθεί χρησιμοποιώντας ένα φίλτρο. Στη συνέχεια χρησιμοποιούμε τη λέξη-κλειδί με κεφαλαία για να πούμε ότι χρησιμοποιούμε το ενσωματωμένο φίλτρο για την έξοδο ολόκληρης της συμβολοσειράς με κεφαλαία.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Φίλτρο κεφαλαίων γραμμάτων στο AngularJS

Από την έξοδο,

  • Μπορεί να φανεί ότι η συμβολοσειρά που μεταβιβάστηκε στη μεταβλητή tutorialName που ήταν ένας συνδυασμός πεζών και κεφαλαίων χαρακτήρων έχει βγει με όλα τα κεφαλαία.

Φίλτρο αριθμών στο AngularJS

Αυτό το φίλτρο μορφοποιεί έναν αριθμό και μπορεί να εφαρμόσει ένα όριο στα δεκαδικά ψηφία για έναν αριθμό.

Ας δούμε ένα παράδειγμα φίλτρων AngularJS με την επιλογή αριθμού.

Στο παρακάτω παράδειγμα,

Θέλαμε να δείξουμε πώς μπορούμε να χρησιμοποιήσουμε το φίλτρο αριθμών για να μορφοποιήσουμε έναν αριθμό ώστε να εμφανίζεται με περιορισμό 2 δεκαδικών ψηφίων.

Θα χρησιμοποιήσουμε έναν ελεγκτή για να στείλουμε έναν αριθμό σε μια προβολή μέσω του αντικειμένου πεδίου. Στη συνέχεια, θα χρησιμοποιήσουμε ένα φίλτρο στην προβολή για να εφαρμόσουμε το φίλτρο αριθμών.

Φίλτρο αριθμών στο AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

Επεξήγηση κώδικα

  1. Εδώ περνάμε έναν αριθμό με μεγαλύτερο αριθμό δεκαδικών ψηφίων σε μια μεταβλητή μέλους που ονομάζεται tutorialID και τον επισυνάπτουμε στο αντικείμενο πεδίου.
  2. Χρησιμοποιούμε τη μεταβλητή μέλους tutorialID και βάζουμε ένα σύμβολο φίλτρου (|) μαζί με το φίλτρο αριθμών. Τώρα στον αριθμό:2, τα δύο υποδεικνύουν ότι το φίλτρο πρέπει να περιορίσει τον αριθμό των δεκαδικών ψηφίων σε 2.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Φίλτρο αριθμών στο AngularJS

Από την έξοδο,

  • Μπορεί να φανεί ότι ο αριθμός που πέρασε στη μεταβλητή tutorialID που είχε μεγάλο αριθμό δεκαδικών ψηφίων έχει περιοριστεί σε 2 δεκαδικά ψηφία λόγω του αριθμού: 2 φίλτρων που εφαρμόστηκαν.

Φίλτρο νομίσματος στο AngularJS

Αυτό το φίλτρο μορφοποιεί ένα φίλτρο νομίσματος σε έναν αριθμό.

Ας υποθέσουμε ότι, εάν θέλετε να εμφανίσετε έναν αριθμό με ένα νόμισμα όπως $, τότε αυτό το φίλτρο μπορεί να χρησιμοποιηθεί.

Στο παρακάτω παράδειγμα, θα χρησιμοποιήσουμε έναν ελεγκτή για να στείλουμε έναν αριθμό σε μια προβολή μέσω του αντικειμένου πεδίου. Στη συνέχεια, θα χρησιμοποιήσουμε ένα φίλτρο στην προβολή για να εφαρμόσουμε το τρέχον φίλτρο.

Φίλτρο νομίσματος στο AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

Επεξήγηση κώδικα

  1. Εδώ περνάμε έναν αριθμό σε μια μεταβλητή μέλους που ονομάζεται tutorialprice και τον επισυνάπτουμε στο αντικείμενο εμβέλειας.
  2. Χρησιμοποιούμε τη μεταβλητή μέλους tutorialprice και βάζουμε ένα σύμβολο φίλτρου (|) μαζί με το φίλτρο νομίσματος. Σημειώστε ότι το νόμισμα που εφαρμόζεται εξαρτάται από τις ρυθμίσεις γλώσσας που εφαρμόζονται στο μηχάνημα.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Φίλτρο νομίσματος στο AngularJS

Από την έξοδο

  • Φαίνεται ότι το σύμβολο νομίσματος έχει προσαρτηθεί στον αριθμό που μεταβιβάστηκε στη μεταβλητή tutorialprice.
  • Στην περίπτωσή μας, καθώς οι ρυθμίσεις γλώσσας είναι Αγγλικά (Ηνωμένες Πολιτείες), το σύμβολο $ εισάγεται ως νόμισμα.

Φίλτρο JSON στο AngularJS

Αυτό το φίλτρο μορφοποιεί α JSON σαν είσοδο και εφαρμόζει το φίλτρο AngularJS JSON για να δώσει την έξοδο σε JSON.

Στο παρακάτω παράδειγμα, θα χρησιμοποιήσουμε έναν ελεγκτή για να στείλουμε ένα αντικείμενο τύπου JSON σε μια προβολή μέσω του αντικειμένου πεδίου. Στη συνέχεια, θα χρησιμοποιήσουμε ένα φίλτρο στην προβολή για να εφαρμόσουμε το φίλτρο JSON.

Φίλτρο JSON στο AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

Επεξήγηση κώδικα

  1. Εδώ περνάμε έναν αριθμό σε μια μεταβλητή μέλους που ονομάζεται "tutorial" και τον επισυνάπτουμε στο αντικείμενο εμβέλειας. Αυτή η μεταβλητή μέλους περιέχει μια συμβολοσειρά τύπου JSON με αναγνωριστικό εκμάθησης:12 και Όνομα εκμάθησης:"Angular".
  2. Χρησιμοποιούμε το σεμινάριο μεταβλητής μέλους και βάζουμε ένα σύμβολο φίλτρου (|) μαζί με το φίλτρο JSON.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Φίλτρο JSON στο AngularJS

Από την έξοδο,

  • Μπορεί να φανεί ότι το JSON σαν συμβολοσειρά αναλύεται και εμφανίζει ένα σωστό αντικείμενο JSON στο πρόγραμμα περιήγησης.

Σύνοψη

  • Τα φίλτρα χρησιμοποιούνται για την αλλαγή του τρόπου με τον οποίο εμφανίζεται η έξοδος στον χρήστη.
  • Το Angular παρέχει ενσωματωμένα φίλτρα, όπως τα πεζά και τα κεφαλαία φίλτρα, για την αλλαγή της εξόδου των συμβολοσειρών σε πεζά και κεφαλαία αντίστοιχα.
  • Υπάρχει επίσης πρόβλεψη για την αλλαγή του τρόπου εμφάνισης των αριθμών χρησιμοποιώντας το φίλτρο αριθμών, καθορίζοντας τον αριθμό των δεκαδικών ψηφίων που θα εμφανίζονται στον αριθμό.
  • Κάποιος μπορεί επίσης να χρησιμοποιήσει το φίλτρο νομίσματος για να προσαρτήσει το σύμβολο νομίσματος σε οποιονδήποτε αριθμό.
  • Εάν υπάρχει απαίτηση να υπάρχει συγκεκριμένη έξοδος JSON, η angular παρέχει επίσης το φίλτρο JSON για το φιλτράρισμα οποιασδήποτε συμβολοσειράς τύπου JSON σε μορφή JSON.
  • Εάν υπάρχει μια απαίτηση που δεν ικανοποιείται από κανένα από τα φίλτρα που ορίζονται στο γωνιακό, τότε μπορείτε να δημιουργήσετε το προσαρμοσμένο φίλτρο και να προσθέσετε τον προσαρμοσμένο κωδικό σας για να προσδιορίσετε τον τύπο εξόδου που θέλετε από το φίλτρο.