AngularJS custom filter and angularjs Filter

AngularJS custom filter and angularjs Filter

A filter, just like its name, is used to receive an input, process it through a rule, and then return the processed result. It is mainly used for data formatting, such as obtaining a subset of an array and sorting elements in the array. Ng has built-in filters: currency, date, filter, json, and limitTo), lowercase (lower case), uppercase (upper case), number (number), orderBy (SORT ). A total of nine types. In addition, you can also customize filters, which are powerful and can process data that meets any requirements.

AngularJS provides some built-in filters for us. Here we will list some scenarios of custom filters.

Custom filter without Parameters

// Filter apps without parameters. filter ('ordinal', function () {return function (number) {if (isNaN (number) | number <1) {return number ;} else {var lastDigit = number % 10; if (lastDigit = 1) {return number + 'st'} else if (lastDigit = 2) {return number + 'nd'} else if (lastDigit = 3) {return number + 'rd'} else if (lastDigit> 3) {return number + 'th '}}}});

This is generally used as follows:

{777 | ordinal }}

Filter with Parameters

Converts letters at a certain position into uppercase letters.

// Filter the app with parameters. filter ('capitalize', function () {// The element to be filtered by the input // char position, the index minus one return function (input, char) {if (isNaN (input )) {// if no Sn is set, the index position defaults to 0var char = char-1 | 0; // convert the letters at the index position of the filter element to var letter = input. charAt (char ). toUpperCase (); var out = []; for (var I = 0; I <input. length; I ++) {if (I = char) {out. push (letter);} else {out. push (input [I]);} return out. join ('') ;}else {return input ;}}});

This is generally used as follows:

{'Seven' | capitalize: 3 }}

Filter set

Filter out the elements that meet certain conditions in the set.

Var app = angular. module ('filters ', []); app. controller ('Demo', function ($ scope) {$ scope. ages = [{name: 'C # ', type: 'static'}, {name: 'php', type: 'dynamic '}, {name: 'Go ', type: 'static '}, {name: 'javascript', type: 'dynamic '}, {name: 'rust', type: 'static'}];}); // filter the set app. filter ('staticlanguage ', function () {return function (input) {var out = []; angular. forEach (input, function (language) {if (language. type = 'static ') {out. push (language) ;}}); return out ;}});

This is generally used as follows:

<li ng-repeat="lang in languages | staticLanguage">{{lang.name}}</li>

Filter, with multiple parameters, and do multiple tasks

Defines the display unit and position of a number.

Var app = angular. module ('filters ', []); app. controller ('Demo', function ($ scope) {$ scope. digit = 29.88;}); // filter multiple participating apps. filter ('customurrency ', function () {return function (input, symbol, place) {if (isNaN (input) {return input ;} else {// check whether the symbol has the real parameter var symbol = symbol | '￥'; var place = undefined? True: place; if (place = true) {return symbol + input;} else {return input + symbol ;}}}});

This is generally used as follows:

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

Filter methods

1. Use filter in the template

We can use filter directly in {} and use | to separate the filter following the expression. The syntax is as follows:

{{ expression | filter }}

You can also use multiple filters. The output of the previous filter will be used as the input of the next filter (no wonder this cargo length is like a pipeline ..)

{{ expression | filter1 | filter2 | ... }}

Filter can receive parameters, which are separated:

{{ expression | filter:argument1:argument2:... }}

In addition to formatting the data in {}, we can also use filter in the command. For example, we can filter the array and then recycle the output:

<span ng-repeat="a in array | filter ">

2. Use filter in controller and service

Filters can also be used in our js Code. The method is our familiar dependency injection. For example, to use the currency filter in the controller, just inject it into the controller. The Code is as follows:

app.controller('testC',function($scope,currencyFilter){$scope.num = currencyFilter(123534); }

Use {num} in the template to directly output $123,534.00! The same applies to services using filters.

At this point, you may wonder, if I want to use multiple filters in the controller, do I have to inject them one by one? Do not worry ~ Ng provides a $ filter service to call the required filter. You only need to inject a $ filter. The usage is as follows:

app.controller('testC',function($scope,$filter){$scope.num = $filter('currency')(123534);　　$scope.date = $filter('date')(new Date()); }

The same effect can be achieved. The advantage is that you can easily use different filters.

Articles you may be interested in:

• Comparison and analysis of the difference between $ http. post and jQuery. post in AngularJS
• Angularjs makes a simple routing function demo
• Filter of AngularJS basic knowledge notes
• AngularJS built-in filter details
• Filter usage in AngularJS
• How to create a custom filter using AngularJS
• Angularjs client compresses image files and uploads instances