AngularJS-filter & AngularJS-anpassat filter med exempel

By: James Hartman James Hartman
Hours Uppdaterad

Vad är Filter i AngularJS?

A Filtrera i AngularJS hjälper till att formatera värdet på ett uttryck som ska visas för användaren utan att ändra originalformatet. Till exempel, om du vill ha din sträng med antingen gemener eller versaler, kan du göra det med hjälp av filter. Det finns inbyggda filter som "små bokstäver", "versaler", som kan hämta gemener och versaler i enlighet därmed.

AngularJS anpassat filter

Ibland kan inte de inbyggda filtren i Angular uppfylla behoven eller kraven för att filtrera uteffekten. I ett sådant fall kan ett anpassat AngularJS-filter skapas, som kan skicka utdata på det sätt som krävs.

På samma sätt kan du använda andra filter för siffror. Under denna handledning kommer vi att se de olika standardinbyggda filtren som finns tillgängliga i Angular.

Hur man skapar anpassat filter i AngularJS

I nedanstående exempel på anpassat filter AngularJS kommer vi att skicka en sträng till vyn från kontrollern via scope-objektet, men vi vill inte att strängen ska visas som den är.

Vi vill säkerställa att vi skickar in ett anpassat filter när vi visar strängen AngularJS, som kommer att lägga till en annan sträng och visa den färdiga strängen för användaren.

Skapa anpassat 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>

Kodförklaring

  1. Här skickar vi en sträng "Angular" i en medlemsvariabel som kallas tutorial och bifogar den till scope-objektet.
  2. Angular tillhandahåller filtertjänsten som kan användas för att skapa vårt anpassade filter. 'Demofiltret' är ett namn som fått vårt filter.
  3. Detta är standardsättet på vilket anpassade filter i AngularJS definieras där en funktion returneras. Denna funktion är det som innehåller den anpassade koden för att skapa det anpassade filtret. I vår funktion tar vi en sträng "Angular" som skickas från vår vy till filtret och lägger till strängen "Tutorial" till detta.
  4. Vi använder vårt Demofilter på vår medlemsvariabel som skickades från styrenheten till vyn.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Skapa anpassat filter i AngularJS

Från utgången,

  • Det kan ses att vårt anpassade filter har tillämpats och
  • Ordet "Tutorial" har lagts till i slutet av strängen, vilket skickades i handledning för medlemsvariabler.

RELATERADE ARTIKLAR

Filter med små bokstäver i AngularJS

Detta filter tar på sig en strängutgång och formaterar strängen och visar alla tecken i strängen som gemener.

Låt oss titta på ett exempel på AngularJS-filter med alternativet AngularJS till gemener.

I exemplet nedan kommer vi att använda en kontroller för att skicka en sträng till en vy via scope-objektet. Vi kommer sedan att använda ett filter i vyn för att konvertera strängen till gemener.

Filter med små bokstäver 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>

Kodförklaring

  1. Här skickar vi en sträng, som är en kombination av gemener och versaler i en medlemsvariabel som kallas "tutorialName" och bifogar den till scope-objektet. Värdet på strängen som skickas är "AngularJS".
  2. Vi använder medlemsvariabeln "tutorialName" och sätter en filtersymbol (|) vilket betyder att utgången måste modifieras med hjälp av ett filter. Vi använder sedan nyckelordet gemener för att säga att använda det inbyggda filtret för att mata ut hela strängen med gemener.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Filter med små bokstäver i AngularJS

Från utgången

  • Det kan ses att strängen "AngularJS" som skickades i variabeln tutorialName som var en kombination av gemener och versaler har exekveras.
  • Efter exekvering är den slutliga utgången med gemener som visas ovan.

Versalfilter i AngularJS

Detta filter liknar filtret med små bokstäver; Skillnaden är att den tar på sig en strängutgång och formaterar strängen och visar alla tecken i strängen som versaler.

Låt oss titta på ett exempel på filtret AngularJS med stora bokstäver med alternativet gemener.

I AngularJS-exemplet nedan kommer vi att använda en kontroller för att skicka en sträng till en vy via scope-objektet. Vi kommer sedan att använda ett filter i vyn för att konvertera strängen till versaler.

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

Kodförklaring

  1. Här skickar vi en sträng som är en kombination av gemener och versaler "Angular JS" i en medlemsvariabel som kallas "tutorialName" och bifogar den till scope-objektet.
  2. Vi använder medlemsvariabeln "tutorialName" och sätter en filtersymbol (|), vilket betyder att utdata måste modifieras med hjälp av ett filter. Vi använder sedan nyckelordet versaler för att säga att använda det inbyggda filtret för att mata ut hela strängen med versaler.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Versalfilter i AngularJS

Från utgången,

  • Det kan ses att strängen som skickades i variabeln tutorialName som var en kombination av gemener och versaler har matats ut med stora bokstäver.

Nummerfilter i AngularJS

Detta filter formaterar ett tal och kan tillämpa en gräns för decimaltecken för ett tal.

Låt oss titta på ett exempel på AngularJS-filter med nummeralternativet.

I exemplet nedan

Vi ville visa upp hur vi kan använda nummerfiltret för att formatera ett tal som ska visas med en begränsning på 2 decimaler.

Vi kommer att använda en kontroller för att skicka ett nummer till en vy via scope-objektet. Vi kommer sedan att använda ett filter i vyn för att tillämpa nummerfiltret.

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>

Kodförklaring

  1. Här skickar vi ett tal med ett större antal decimaler i en medlemsvariabel som kallas tutorialID och bifogar det till scope-objektet.
  2. Vi använder medlemsvariabeln tutorialID och sätter en filtersymbol (|) tillsammans med nummerfiltret. Nu i nummer:2 indikerar de två att filtret ska begränsa antalet decimaler till 2.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Nummerfilter i AngularJS

Från utgången,

  • Det kan ses att antalet som skickades i variabeln tutorialID som hade ett stort antal decimaler har begränsats till 2 decimaler på grund av antalet: 2 filter som tillämpades.

Valutafilter i AngularJS

Detta filter formaterar ett valutafilter till ett tal.

Anta att om du vill visa ett tal med en valuta som $, så kan detta filter användas.

I exemplet nedan kommer vi att använda en kontroller för att skicka ett nummer till en vy via scope-objektet. Vi kommer sedan att använda ett filter i vyn för att tillämpa det aktuella filtret.

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>

Kodförklaring

  1. Här skickar vi ett nummer i en medlemsvariabel som kallas tutorialprice och bifogar det till scope-objektet.
  2. Vi använder medlemsvariabeln tutorialprice och sätter en filtersymbol (|) tillsammans med valutafiltret. Observera att valutan som används beror på språkinställningarna som tillämpas på maskinen.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Valutafilter i AngularJS

Från utgången

  • Det kan ses att valutasymbolen har lagts till numret som passerades i det variabla tutorialpriset.
  • I vårt fall, eftersom språkinställningarna är engelska (USA), infogas symbolen $ som valuta.

JSON-filter i AngularJS

Detta filter formaterar en JSON gillar input och tillämpar AngularJS JSON-filtret för att ge utdata i JSON.

I exemplet nedan kommer vi att använda en kontroller för att skicka ett JSON-objekt till en vy via scope-objektet. Vi kommer sedan att använda ett filter i vyn för att tillämpa JSON-filtret.

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>

Kodförklaring

  1. Här skickar vi ett nummer i en medlemsvariabel som kallas "tutorial" och bifogar det till scope-objektet. Denna medlemsvariabel innehåller en sträng av JSON-typ med Tutorial ID:12 och TutorialName:"Angular".
  2. Vi använder guiden för medlemsvariabler och sätter en filtersymbol (|) tillsammans med JSON-filtret.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

JSON-filter i AngularJS

Från utgången,

  • Det kan ses att JSON som en sträng analyseras och visar ett riktigt JSON-objekt i webbläsaren.

Sammanfattning

  • Filter används för att ändra hur utdata visas för användaren.
  • Angular tillhandahåller inbyggda filter som filter för gemener och versaler för att ändra utmatningen av strängar till gemener respektive versaler.
  • Det finns också en bestämmelse för att ändra hur siffror visas genom att använda nummerfiltret genom att ange antalet decimaler som ska visas i talet.
  • Man kan också använda valutafiltret för att lägga till valutasymbolen till valfritt nummer.
  • Om det finns ett krav på att ha JSON-specifik utdata, tillhandahåller angular också JSON-filtret för att filtrera alla JSON-liknande strängar till JSON-format.
  • Om det finns ett krav som inte uppfylls av något av filtren som definieras i vinkel, kan du skapa ditt anpassade filter och lägga till din anpassade kod för att bestämma vilken typ av utdata du vill ha från filtret.

Du kanske gillar: