Brief introduction Angularjs Filters

Website Link: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filters/

The filter function is to receive an input, process it through a rule, and then return the processed results to the user. Filter can be used in templates, controllers, or services, and it is also easy to customize a filter.

Using the filter in a template

Filter can be used to use syntax expressions in a view template:

{{expression | filter}}

For example, the format {{ | currency }} is using the filter usage of currency, allowing the number 12 to be filtered into currency form, the result being $ $ . 00.

Filter can be applied to the results of another filter. This is called "chaining" and uses the following syntax:

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

Parameters may be required in filter. The syntax is:

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

For example: Format {{ 1234 | Number: 2 }} is using the filter usage of numbers, and 1234 is filtered to a number with two decimal places. The result is: 1,234.00. using filter in controller, services, directives

You can use filter in controller, services, directives.

To do this, you need to inject the dependency name into your controller/service/directive: filter, for example: A filter is number and you need to use dependency injection numberfilter. The injected parameter is a function that takes the value as the first argument and then filters the parameter with the second argument.

The following example uses the filter filter called filter. This filter can reduce arrays on the basis of sub arrays. You can also apply a tag to a view template, like this: {{ctrl.array|filter: ' A '}, which will do a full-text search for ' a '. However, using filter in the View template will re-filter on each filter, and if the array is larger it will be loaded multiple times.

So the following example calls the filter in the controller directly. With this, the controller can call filter when needed (for example, when the backend data is loaded or the filter's expression changes).

index.html:<div ng-controller="Filtercontroller as Ctrl"> <div>All Entries:<span ng-repeat="entry in Ctrl.array">{{entry.name}} </span> </div> <div>Entries that contain an"a":    <span ng-repeat="entry in Ctrl.filteredarray">{{entry.name}} </span> </div></div>Script.js:angular.module ('Filterincontrollermodule', []). Controller ('Filtercontroller', ['Filterfilter', Function (filterfilter) { This. Array =[{name:'Tobias'}, {name:'Jeff'}, {name:'Brian'}, {name:'Igor'}, {name:'James'}, {name:'Brad'}  ];  This. Filteredarray = Filterfilter ( This. Array,'a');}]);
The result: all Entries:tobias Jeff Brian Igor James bradentries the contain an"a": Tobias Brian James Brad

To create a custom filters:

Writing your own filter is very simple: just register a new filter factory function in your module. Inside, the Filterprovider is used here. This factory function should return a new filter function and enter the value as the first parameter. Any filter parameters are passed to the filter function as additional parameters.

This filter function should be a simple function. This means that it should be stateless and idempotent. When the input function changes, angular relies on these properties and executes the filter.

Note: The name of the filter must be a valid angular expression identifier. For example, uppercase or by. The name is not allowed to have special characters, such as hyphens and dots are not allowed. If you want your filter to have namespaces, you can use uppercase (Myappsubsectionfilterx) or underscore (Myapp_subsection_filterx).

The following example filter is to write back a string. In addition, it can add a condition to capitalize the string.

index.html<div ng-controller="Mycontroller"> <input ng-model="Greeting"Type="text"><br>No Filter: {{greeting}}<br>Reverse: {{greeting|reverse}}<br>Reverse+ Uppercase: {{greeting|reverse:true}}<br>Reverse, FilteredinchController: {{filteredgreeting}}<br></div>Script.jsangular.module ('Myreversefilterapp', []). Filter ('Reverse', function () {returnfunction (input, uppercase) {input= Input | |"'; var  out="";  for(vari =0; i < input.length; i++) {       out= Input.charat (i) + out; }    //conditional based on optional argument    if(uppercase) { out= out. toUpperCase (); }    return  out; };}). Controller ('Mycontroller', ['$scope','Reversefilter', function ($scope, reversefilter) {$scope. Greeting='Hello'; $scope. filteredgreeting=reversefilter ($scope. Greeting);}]); The result: No filter:helloReverse:ollehReverse+uppercase:ollehreverse, FilteredinchController:olleh

Stateful filters (Stateful filters)

It is strongly recommended to write stateful filters because these cannot be optimized with angular, which can often lead to performance problems. Many stateful filters are converted to stateless filters simply by exposing the hidden state as the model and converting it into a filter parameter.

However, if you need to write a stateful filters, you must mark the filter as $stateful, which means it will be executed one or more times within each $digest cycle.

index,html<div ng-controller="Mycontroller">Input:<input ng-model="Greeting"Type="text"><br>decoration:<input ng-model="Decoration.symbol"Type="text"><br>No Filter: {{greeting}}<br>decorated: {{greeting| Decorate}}<br></div>Script.js:angular.module ('Mystatefulfilterapp', []). Filter ('Decorate', ['Decoration', function (decoration) {function decoratefilter (input) {returnDecoration.symbol + input +Decoration.symbol; } decoratefilter. $stateful=true; returnDecoratefilter;}]). Controller ('Mycontroller', ['$scope','Decoration', function ($scope, decoration) {$scope. Greeting='Hello'; $scope. Decoration=decoration;}]). Value ('Decoration', {symbol:'*'}); The result is: No filter:hellodecorated:*hello*

Next time you will write an article about the common use of filter in Angularjs.

Brief introduction Angularjs Filters