AngularJS-filtre og AngularJS-tilpasset filter med eksempel

by: James Hartman James Hartman
Hours oppdatert

Hva er filter i AngularJS?

A Filtrer i AngularJS hjelper til med å formatere verdien av et uttrykk som skal vises for brukeren uten å endre det opprinnelige formatet. For eksempel, hvis du vil ha strengen din enten med små eller store bokstaver, kan du gjøre det ved å bruke filtre. Det er innebygde filtre som "små bokstaver", "store bokstaver", som kan hente ut små bokstaver og store bokstaver tilsvarende.

AngularJS tilpasset filter

Noen ganger kan ikke de innebygde filtrene i Angular møte behovene eller kravene til filtrering av utgang. I et slikt tilfelle kan et tilpasset AngularJS-filter opprettes, som kan sende utdataene på ønsket måte.

På samme måte kan du bruke andre filtre for tall. I løpet av denne opplæringen vil vi se de forskjellige standard innebygde filtrene som er tilgjengelige i Angular.

Hvordan lage tilpasset filter i AngularJS

I eksemplet under tilpasset filter AngularJS skal vi sende en streng til visningen fra kontrolleren via scope-objektet, men vi vil ikke at strengen skal vises som den er.

Vi ønsker å sikre at når vi viser strengen, sender vi inn et tilpasset filter AngularJS, som vil legge til en annen streng og vise den fullførte strengen til brukeren.

Opprett tilpasset filter i 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>

Code Forklaring

  1. Her sender vi en streng "Angular" i en medlemsvariabel kalt tutorial og fester den til scope-objektet.
  2. Angular tilbyr filtertjenesten som kan brukes til å lage vårt tilpassede filter. 'Demofilter' er et navn gitt til filteret vårt.
  3. Dette er standardmåten som tilpassede filtre i AngularJS defineres der en funksjon returneres. Denne funksjonen er det som inneholder den egendefinerte koden for å lage det egendefinerte filteret. I funksjonen vår tar vi en streng "Angular" som sendes fra visningen vår til filteret og legger til strengen "Tutorial" til denne.
  4. Vi bruker vårt Demofilter på vår medlemsvariabel som ble sendt fra kontrolleren til visningen.

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Opprett tilpasset filter i AngularJS

Fra utgangen,

  • Det kan ses at vårt tilpassede filter er brukt og
  • Ordet "Tutorial" er lagt til på slutten av strengen, som ble sendt i medlemsvariabelopplæringen.

RELATERTE ARTIKLER

Filter for små bokstaver i AngularJS

Dette filteret tar på seg en strengutgang og formaterer strengen og viser alle tegnene i strengen som små bokstaver.

La oss se på et eksempel på AngularJS-filtre med alternativet AngularJS til små bokstaver.

I eksemplet nedenfor vil vi bruke en kontroller til å sende en streng til en visning via scope-objektet. Vi vil da bruke et filter i visningen for å konvertere strengen til små bokstaver.

Filter for små bokstaver i 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>

Code Forklaring

  1. Her sender vi en streng, som er en kombinasjon av små og store bokstaver i en medlemsvariabel kalt "tutorialName" og fester den til scope-objektet. Verdien av strengen som sendes er "AngularJS".
  2. Vi bruker medlemsvariabelen "tutorialName" og setter et filtersymbol (|) som betyr at utdataene må endres ved å bruke et filter. Vi bruker så nøkkelordet med små bokstaver for å si å bruke det innebygde filteret til å skrive ut hele strengen med små bokstaver.

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Filter for små bokstaver i AngularJS

Fra utgangen

  • Det kan sees at strengen "AngularJS" som ble sendt i variabelen tutorialName som var en kombinasjon av små og store bokstaver har blitt utført.
  • Etter utførelse er den endelige utgangen med små bokstaver som vist ovenfor.

Filter for store bokstaver i AngularJS

Dette filteret ligner filteret med små bokstaver; forskjellen er at tar på seg en strengutgang og formaterer strengen og viser alle tegnene i strengen som store bokstaver.

La oss se på et eksempel på bruk av store bokstaver AngularJS med alternativet for små bokstaver.

I AngularJS-eksemplet nedenfor vil vi bruke en kontroller for å sende en streng til en visning via scope-objektet. Vi vil da bruke et filter i visningen for å konvertere strengen til store bokstaver.

Filter for store bokstaver i 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>

Code Forklaring

  1. Her sender vi en streng som er en kombinasjon av små og store bokstaver "Angular JS" i en medlemsvariabel kalt "tutorialName" og fester den til scope-objektet.
  2. Vi bruker medlemsvariabelen "tutorialName" og setter et filtersymbol (|), som betyr at utdataene må endres ved å bruke et filter. Vi bruker så nøkkelordet med store bokstaver for å si å bruke det innebygde filteret til å skrive ut hele strengen med store bokstaver.

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Filter for store bokstaver i AngularJS

Fra utgangen,

  • Det kan ses at strengen som ble sendt i variabelen tutorialName, som var en kombinasjon av små og store bokstaver, har blitt skrevet ut med store bokstaver.

Nummerfilter i AngularJS

Dette filteret formaterer et tall og kan bruke en grense for desimaltegn for et tall.

La oss se på et eksempel på AngularJS-filtre med tallalternativet.

I eksemplet nedenfor,

Vi ønsket å vise frem hvordan vi kan bruke tallfilteret til å formatere et tall som skal vises med en begrensning på 2 desimaler.

Vi vil bruke en kontroller for å sende et nummer til en visning via scope-objektet. Vi vil da bruke et filter i visningen for å bruke tallfilteret.

Nummerfilter i 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>

Code Forklaring

  1. Her sender vi et tall med et større antall desimaler i en medlemsvariabel kalt tutorialID og knytter det til scope-objektet.
  2. Vi bruker medlemsvariabelen tutorialID og setter et filtersymbol (|) sammen med tallfilteret. Nå i nummer:2 indikerer de to at filteret skal begrense antall desimaler til 2.

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Nummerfilter i AngularJS

Fra utgangen,

  • Det kan ses at tallet som ble bestått i variabelen tutorialID som hadde et stort antall desimaler, er begrenset til 2 desimaler på grunn av antallet: 2 filtre som ble brukt.

Valutafilter i AngularJS

Dette filteret formaterer et valutafilter til et tall.

Anta at hvis du ønsker å vise et tall med en valuta som $, kan dette filteret brukes.

I eksemplet nedenfor vil vi bruke en kontroller til å sende et nummer til en visning via scope-objektet. Vi vil da bruke et filter i visningen for å bruke det gjeldende filteret.

Valutafilter i 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>

Code Forklaring

  1. Her sender vi et tall i en medlemsvariabel kalt tutorialprice og knytter det til scope-objektet.
  2. Vi bruker medlemsvariabelen opplæringspris og setter et filtersymbol (|) sammen med valutafilteret. Merk at valutaen som brukes avhenger av språkinnstillingene som brukes på maskinen.

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Valutafilter i AngularJS

Fra utgangen

  • Det kan sees at valutasymbolet er lagt til nummeret som ble bestått i den variable opplæringsprisen.
  • I vårt tilfelle, siden språkinnstillingene er engelsk (USA), er $-symbolet satt inn som valuta.

JSON-filter i AngularJS

Dette filteret formaterer en JSON liker input og bruker AngularJS JSON-filteret for å gi utdata i JSON.

I eksemplet nedenfor vil vi bruke en kontroller til å sende et JSON-objekt til en visning via scope-objektet. Vi vil da bruke et filter i visningen for å bruke JSON-filteret.

JSON-filter i 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>

Code Forklaring

  1. Her sender vi et tall i en medlemsvariabel kalt "tutorial" og fester det til scope-objektet. Denne medlemsvariabelen inneholder en JSON-typestreng med Tutorial ID:12, og TutorialName:"Angular".
  2. Vi bruker medlemsvariabelopplæringen og setter et filtersymbol (|) sammen med JSON-filteret.

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

JSON-filter i AngularJS

Fra utgangen,

  • Det kan sees at JSON som en streng blir analysert og viser et riktig JSON-objekt i nettleseren.

Sammendrag

  • Filtre brukes til å endre måten utdataene vises på for brukeren.
  • Angular har innebygde filtre som små og store filtre for å endre utgangen av strenger til henholdsvis små og store bokstaver.
  • Det er også en bestemmelse for å endre måten tall vises på ved å bruke tallfilteret ved å spesifisere antall desimaltegn som skal vises i tallet.
  • Man kan også bruke valutafilteret til å legge til valutasymbolet til et hvilket som helst tall.
  • Hvis det er et krav om å ha JSON-spesifikk utgang, gir angular også JSON-filteret for å filtrere en hvilken som helst JSON-lignende streng til JSON-format.
  • Hvis det er et krav som ikke oppfylles av noen av filtrene som er definert i angular, kan du lage ditt egendefinerte filter og legge til din egendefinerte kode for å bestemme hvilken type utgang du ønsker fra filteret.

Oppsummer dette innlegget med: