Newsletter

AngularJS Filters – Java4s

AngularJs » on Mar 8, 2016 { 4 Comments } By Sivateja

In Angularjs filters can be used to format the data, format means changing the text/data to upper/lower case or capitalize the first letter and showing the numbers in currency format and many more.

Generally we can use filters in two ways..

  • by adding to Expressions
  • by Adding to Directives

Here are few familiar inbuilt angular filters which will be using in day to day projects

  • uppercase > displays text in upper case
  • lowercase > displays text in lower case
  • currency > displays number in currency format
  • limitTo > displays limited number of¬†characters
  • orderby > order the Array based on the given criteria or condition
  • filter > filter can filter the array by selecting subset of array items (hope you will not understand this point ūüôā but no worries, I will explain in detail in the example bellow)

We have few other inbuilt filters; you can check them in Angular Docs.

Note: Filters can be added by using the pipe symbol ( | ), followed by a filter name.

Adding  to Expressions

uppercase

uppercase > this will display text in upper case format.

Example:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
  <div ng-app="java4sApp" ng-controller="java4sCtrl">
       Welcome to {{ name | uppercase }}
  </div>

  <script>
           angular.module('java4sApp', [])
                       .controller('java4sCtrl', function($scope) {
                                      $scope.name = "java4s"
            });
  </script>
</body>
</html>

Output:
Welcome to JAVA4S

lowercase

lowercase > this will display text in lower case format.

Example:

<div ng-app="java4sApp" ng-controller="java4sCtrl">
       Welcome to {{ name | lowercase }}
</div>

<script>
       angular.module('java4sApp', [])
           .controller('java4sCtrl', function($scope) {
                $scope.name = "JAVA4S"
       });
</script>

Output:
Welcome to java4s

currency

currency > this will display number in the currency format

Example:

<div ng-app="java4sApp" ng-controller="java4sCtrl">
     Price is {{ price | currency }}
</div>

<script>
     angular.module('java4sApp', [])
               .controller('java4sCtrl', function($scope) {
                     $scope.price= "7"
     });
</script>

Output:
Price is $7.00

limitTo

limitTo > displays limited number of characters

Example:

<div ng-app="java4sApp" ng-controller="java4sCtrl">
     Name : {{ name | limitTo:4 }}
</div>

<script>
     angular.module('java4sApp', [])
               .controller('java4sCtrl', function($scope) {
                     $scope.name= "Java4s"
     });
</script>

Output:
Name : Java

Adding  to Directives

orderby

orderby > order the Array based on the given criteria or condition

Example:

<div ng-app="java4sApp" ng-controller="java4sCtrl">
   <ul>
       <li ng-repeat="detail in details | orderBy:'name'">
             {{ detail.name + ' from ' + detail.country }}
       </li>
    </ul>
</div>

<script>
   angular.module('java4sApp', [])
            .controller('java4sCtrl', function($scope) {
                $scope.details = [
                       {name:'Siva',country:'India'},
                       {name:'Teja',country:'United States'},
                       {name:'Kandula',country:'Canada'}
                ]; 
 }); 
</script>

Output:

  • Kandula, Canada
  • Siva, India
  • Teja, United States

filter

filter¬†>¬†filter¬†can filter the array based on the given criteria, I am taking the¬†same example again…

Example:

<div ng-app="java4sApp" ng-controller="java4sCtrl">
     Filter : <input type = "text" ng-model = "country">
     <ul>
          <li ng-repeat = "detail in details | filter: country">
                  {{ detail.name + ' - ' + detail.country }}
          </li>
     </ul>
</div>

<script>
    angular.module('java4sApp', []).controller('java4sCtrl', function($scope) {
               $scope.details = [
                      {name:'Siva',country:'India'},
                      {name:'Teja',country:'United States'},
                      {name:'Kandula',country:'Canada'}
               ]; 
    });
</script>

Click here to check the demo.

‚Äč ‚Äč‚Äč

  ::. About the Author .::

Java4s_Author
- Java/J2EE Full Stack Developer
Founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog, Love Java and UI frameworks.
You can sign-up for the Email Newsletter for your daily dose of Java tutorials.

Comments

4 Responses to “AngularJS Filters – Java4s”
  1. Swamy says:

    I got an idea after this explanation…thanks Sivateja Kandula……

  2. Pallavi says:

    Thanks for your easy explanation

  3. Chandra says:

    Nice explanation… Thanks, Shiva.

Name*
Mail*
Website



By posting your answer, you agree to our comments policy.
Most Recent Posts from Top Categories
Spring Boot Hibernate Spring
Contact | About Us | Privacy Policy | Advertise With Us

© 2010 - 2018 Java4s - Get It Yourself.
The content is copyrighted to Sivateja Kandula and may not be reproduced on other websites.