Custom filters in Angularjs

Some of the built-in filters are available in Angularjs, and here are some examples of custom filter scenarios.

Custom filters, without entry

//Filter Without entryApp.filter (' ordinal ',function () {    return function(number) {if(IsNaN (number) | | number < 1) {            returnNumber ; } Else {            varLastdigit = number% 10; if(Lastdigit = = 1) {                returnNumber + ' st '            } Else if(Lastdigit = = 2) {                returnNumber + ' nd '            } Else if(Lastdigit = = 3) {                returnnumber + ' rd '            } Else if(Lastdigit > 3) {                returnnumber + ' th '            }        }    }});

This is generally used:

{{777 | ordinal}}

Filter Band Entry

Converts the letters in a position to uppercase.

//Filter Band EntryApp.filter (' Capitalize ',function () {    //input needs to filter the elements    //char position, index minus one    return function(Input,Char) {        if(IsNaN (input)) {//If the ordinal position is not set, the index position is 0 by default            var Char=Char-1 | | 0; //converts the letters in the index position of the filter element to uppercase            varLetter = Input.charat (Char). toUpperCase (); varout = [];  for(vari = 0; i < input.length; i++) {                if(i = =Char) {Out.push (letter); } Else{Out.push (input[i]); }            }            returnOut.join (' '); } Else {            returninput; }    }});

This is generally used:

{' Seven ' | capitalize:3}}

Filter Collection

Filters out elements in the collection that satisfy a certain condition.

varApp = Angular.module (' Filters ', []); App.controller (' Demo ',function($scope) {$scope. Languages=[{name:' C # ', type: ' Static '}, {name:' PHP ', type: ' Dynamic '}, {name:' Go ', type: ' Static '}, {name:' JavaScript ', type: ' Dynamic '}, {name:' Rust ', type: ' Static '}    ];});//Filter CollectionApp.filter (' Staticlanguage ',function () {    return function(input) {varout = []; Angular.foreach (Input,function(language) {if(Language.type = = = ' Static ') {Out.push (language);        }        }); returnOut ; }});

This is generally used:


<li ng-repeat= "Lang in Languages | Staticlanguage ">{{lang.name}}</li>

filter, with multiple parameters, do more things

Defines the display units and display locations for numbers.

varApp = Angular.module (' Filters ', []); App.controller (' Demo ',function($scope) {$scope. Digit= 29.88;});//Filter Multi-item multiple entriesApp.filter (' Customcurrency ',function () {    return function(input, symbol, place) {if(IsNaN (input)) {returninput; } Else {            //Check if symbol has an actual argument            varSymbol = Symbol | | ' ￥ '; varPlace = Place = = = undefined?true: Place; if(place===true){                returnsymbol+input; }Else{                returnInput +symbol; }        }    }});

This is generally used:

<P><Strong>Original:</Strong></P><ul><Li>{{digit}}</Li></ul><P><Strong>Custom Currency Filter</Strong></P><ul>  <Li>{{digit | customcurrency}}--default</Li>  <Li>{{digit | customcurrency: ' META '}}--custom symbol</Li>  <Li>{{digit | customcurrency: ' meta ': false}}--custom symbol and custom location</Li></ul>

Custom filters in Angularjs