Categories: AngularJs

Filters – AngularJS

AngularJS provides Filter to modify data in view. There are different types of filters as per requirement.

uppercase : uppercase filter is used to transform data into upper case.

[html]
Enter state name:
State name: {{addr.state | uppercase}}

[/html]

lowercase : lowercase filter is used to transform data into lower case.

[html]
Enter state name:
State name: {{addr.state | lowercase}}


[/html]

currency: currency filter is used to transform data into currency format.

[html]
Enter Cost:
Display Cost: {{addr.cost | currency}}


[/html]

number : number filter formats a number to string.

[html]
Enter Cost:
Display Cost: {{addr.cost | number}}

[/html]

filter: filter filter works on arrays. It gives subset of given array on the basis of applied filter criteria.

[html]
  • {{ y }}


[/html]

orderby: orderby filter is also specific to arrays. orderby filter sorts the array on the basis of given criteria.

[html]

state
city

  • {{ y.state }} – {{ y.city }}

];

$scope.setOrderSort = function(x) { //alert('h'); $scope.myOrderType = x; }

});

[/html]

limitTo: limitTo works on arrays and set a limit of specific numbers of elements.

[html]
  • {{ y.state }} – {{ y.city }}

];

$scope.displayNumRecord = function($scope,x) { $scope.displayNum = x; }

});

[/html]

json : json filter is used to convert json object to string.

[html]
  • {{ addr | json }}

];

});

[/html]

date : date is used to format date into specified format.

[html]

Syntax
{{ date | date : format : timezone }}

Today Date = {{ today | date }}

[/html]

Making Custom filters: We can make our custom filter.

[html]

{{y | customFormat}}

return y.toUpperCase(); /* You can build here your own logic to make custom filter. */ }; }); app.controller('dateControllerCustom', function($scope) { $scope.students = ['ravi', 'raju', 'sanjay', 'dev', 'joo']; });

[/html]

jeff77

Disqus Comments Loading...

Recent Posts

Noun

A Noun is the name of a person, place or thing. or Name of anything is noun. For example: Sita…

10 years ago

Introduction – AngularJS

Misko Hevery, a Google employee, developed AngularJS. First version 1.0 of AngularJS was released in 2012. Now AngularJS is fully…

9 years ago

Expressions – AngularJS

AngularJS expressions contain operators,literals, and variables.  AngularJS expressions can be written inside HTML while JavaScript expressions can't be.  AngularJS expressions…

9 years ago

Noun – Exercise

Some sentences are given below. Choose the nouns and mention the type of noun whether they are proper noun, common…

9 years ago

Modules – AngularJS

Modules are containers for appication controller. They contain different parts of an application. [html] {{ state + " " +…

9 years ago

Directives – AngularJS

Using Directives you can extend HTML attributes. In AngularJS you can define your own directives while it has its own…

9 years ago