Thursday, July 2, 2015

AngularJS Filters Overview

Invoke AngularJS Custom Filters from JavaScript

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 on how to create and invoke custom filters from the view, in this post we shall see on how to create custom filters and invoke them from the controller functions in JavaScript.

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.

Wednesday, July 1, 2015

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.