bing
Flat 10% & upto 50% off + Free additional Courses. Hurry up!

AngularJS Filters

 

AngularJS Filters alters the data and it can be implemented to directives and expressions by pipe character. Filters in AngularJS are –

  1. lowercase
  2. uppercase
  3. currency
  4. filter
  5. order by

 

1. lowercase – It is used to convert the text to the lower case text. It formats strings into lower case.

e.g.

<!DOCTYPE html>

<html>

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>

<div ng-app="" ng-init="Name='Intellipaat'">

<p>Name: {{ Name | lowercase }}</p>

</div>

</body>

</html>

Output

Name: intellipaat

 

2. uppercase – It is used to convert the text to theupper case text. It formats strings into upper case.

e.g.

<!DOCTYPE html>

<html>

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>

<div ng-app="" ng-init="Name='Intellipaat'">

<p>Name: {{ Name | uppercase }}</p>

</div>

</body>

</html>

Output

Name: INTELLIPAAT

 

3. currency – It formats a number to a currency format.

e.g. 

<!DOCTYPE html>

<html>

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>

<div ng-app="" >

Salary: <input type="number" ng-model="salary">

<p>Total = {{salary | currency }}</p>

</div>

</body>

</html>

 Output

Salary: 100

Total = $100.00

 

4. filter – It selects a subset of items from an array according to to the specified condition.

e.g.

<html>

<head>

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>

<body>

<div ng-app = "details" ng-controller = "studentController">

Enter subject: <input type = "text" ng-model = "subjectName">

<ul>

<li ng-repeat = "subject in student.subjects | filter: subjectName ">

{{ subject.name + ', marks:' + subject.marks }}

</li>

</ul>

</div>

<script>

var details= angular.module("details", []);

details.controller('studentController', function($scope) {

$scope.student = {

subjects:[

{name:'English',marks:85},

{name:'Math',marks:90},

{name:'Physics',marks:80},

{name:'Chemistry',marks:75}

]

};

});

</script>

</body>

</html>

 Output

output5

5. orderBy – It orders an array according to the specified condition. You can use orderBy as follows in the above application:

e.g.

<li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">

{{ subject.name + ', marks:' + subject.marks }}

</li>

 Output

output6

"0 Responses on AngularJS Filters"

Training in Cities

Bangalore, Hyderabad, Chennai, Delhi, Kolkata, UK, London, Chicago, San Francisco, Dallas, Washington, New York, Orlando, Boston

100% Secure Payments. All major credit & debit cards accepted Or Pay by Paypal.

top

Sales Offer

  • To avail this offer, enroll before 07th December 2016.
  • This offer cannot be combined with any other offer.
  • This offer is valid on selected courses only.
  • Please use coupon codes mentioned below to avail the offer
offer-june

Sign Up or Login to view the Free AngularJS Filters.