AngularJS Custom Filters

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. In the previous posts we have seen some of the key pre-defined filters, we can also create our own custom filter and use them as appropriate. In this post we shall see on how to create and use a custom filter.

Custom filters can be defined by configuring them in the application module, we will have to define a filter function, the function implementation should script the expected functionality from the filter.

The following is an example of a simple custom filter which prefix the word ‘Hello’ to any text which is annotated with the custom filter.

AngularJS limitTo Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The limitTo filter is used to control the number of items that are displayed in an ng-repeat directive. The model array/collection which feeds can have any number of items, but the limitTo filter can control the number of items displayed in the view.

The following is the syntax for using limitTo filter
<li ng-repeat="<array/collection> | limitTo:<number of items to limit>">

The following is an example of using limitTo filter.

AngularJS number Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The number filter is used to format numbers in the view

The following is the syntax for using number filter
{{ <value/property> | number:<# decimal places> }}

The following is an example of using number filter.

AngularJS JSON Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The JSON filter is used to format JSON data in the view

The following is the syntax for using json filter
{{ <string > | json }}

The following is an example of using json filter.

AngularJS uppercase Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The case filters are used to format cast strings between Upper/Lower cases.

The following is the syntax for using uppercase filters
{{<string/variable> | uppercase}}

The following is an example of using uppercase filter.