Angularjs Use filters detailed _angularjs

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

Using filter in a template

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

{{expression | filter}}

For example, the format {{a | currency}} is using the filter usage of currency, letting the number 12 filter into currency form, and the result is $12.00.

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

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

Parameters may be required in filter. The syntax is:

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

For example, the format {{1234 | number:2}} is the filter usage for number 1234, which is filtered to a number with a two-digit decimal point, and the result is: 1,234.00.

Using filter in controller, services, directives

You can use filter in controller, services, and 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 inject numberfilter with dependency. The injected parameter is a function that takes the value as the first argument and then filters the argument with the second argument.

The following example uses filter filters 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 make a full-text search for ' a '. However, the use of filter in the view template will filter back on each filter, if the larger array is loaded more than once.

So the following example directly calls the filter in the controller. With this, the controller can call filter when needed (for example: when the back-end data is loaded or when 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 ' 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 results are:

All Entries:tobias Jeff Brian Igor James Brad
entries that contain a "a": Tobias Brian James

To create a custom filters:

It's very simple to write your own filter: Just register a new filter factory function in your module. Inside, the Filterprovider is used here. The factory function should return a new filter function and take the input value as the first argument. 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 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 points 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 a string that is reverse-written. 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, filtered in controller: {{filteredgreeting}}<br>
</div>
 

Script.js

Angular.module (' Myreversefilterapp ', [])
. Filter (' Reverse ', function () {return
 function (input, uppercase) {
  input = Input | | '';
  var out = "";
  for (var i = 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 results are:

No Filter:hello
Reverse:olleh
Reverse + uppercase:olleh
Reverse, filtered in Controller:olleh

Stateful filters (Stateful filters)

Writing stateful filters is strongly recommended because these cannot be optimized with angular, which often results in performance problems. Many stateful filters are converted into stateless filters simply by exposing the hidden state as 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 that it will be executed one or more times in 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) {return
  Decoration.symbol + input + decoration.symbol;
 }
 Decoratefilter. $stateful = true;

 Return Decoratefilter
}])
. Controller (' Mycontroller ', [' $scope ', ' decoration ', function ($scope, decoration) {
 $scope. greeting = ' Hello ';
 $scope. Decoration = decoration;
}])
. Value (' decoration ', {symbol: ' * '});

The results are:

No Filter:hello
decorated: *hello*

The next time you will write an article on the common usage of filter in ANGULARJS.