Post
Ask Question

AngularJS Filters

AngularJS

AngularJS is a JavaScript framework used for creating single web page applications. It simplifies JavaScript object with HTML UI elements.

There are some built-in filters available in AngularJS.

  1. currency - currency is used to update a number to a currency format. Example,

    app.js
    1. var app = angular.module('app', []);   
    filtercontroller.js
    1. app.controller('filterCtrl', function($scope)   
    2. {  
    3.     $scope.price = 755;  
    4. });  
    HTML
    1. <h2>AngularJS currency filter example</h2>  
    2. <div ng-app="app" ng-controller="filterCtrl">  
    3.     <h1>Price: {{ price | currency }}</h1> </div>  
    4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
    5. <script src="App/app.js"></script>  
    6. <script src="Controller/filtercontroller.js"></script>  
    output

  2. number - number is used to change a number to a string. Example,

    app.js
    1. var app = angular.module('app', []);   
    filtercontroller.js
    1. app.controller('filterCtrl', function($scope)   
    2. {  
    3.     $scope.prize = 50000000;  
    4.     $scope.weight = 5555;  
    5. });  
    HTML
    1. <h2>AngularJS number filter example</h2>  
    2. <div ng-app="app" ng-controller="filterCtrl">  
    3.     <h1>Price: {{ prize | number }}</h1>  
    4.     <h1>Weight: {{weight | number : 3}} kg</h1> </div>  
    5. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
    6. <script src="App/app.js"></script>  
    7. <script src="Controller/filtercontroller.js"></script>  
    output

  3. date - date is used to change a date to a specified format. Example,

    app.js
    1. var app = angular.module('app', []);   
    filtercontroller.js
    1. app.controller('filterCtrl', function($scope)   
    2. {  
    3.     //date   
    4.     $scope.today = new Date();  
    5. });  
    HTML
    1. <h2>AngularJS date filter example</h2>  
    2. <div ng-app="app" ng-controller="filterCtrl">  
    3.     <h1>Date = {{ today | date }}</h1>  
    4.     <h1>Date = {{ today | date : "dd.MM.y" }}</h1>  
    5.     <h1>Date = {{ today | date : "fullDate" }}</h1>  
    6.     <h1>Date = {{ "2016-01-05T09:05:05.035Z" | date }}</h1> </div>  
    7. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
    8. <script src="App/app.js"></script>  
    9. <script src="Controller/filtercontroller.js"></script>  
    output

  4. filter - filter is used to select s subset of items from an array. Example,

    app.js
    1. var app = angular.module('app', []);   
    filtercontroller.js
    1. app.controller('filterCtrl', function($scope)   
    2. {  
    3.     //filter   
    4.     $scope.names = ['Raj', 'Kumar', 'Beniwal', 'Pari', 'Yash', 'Naresh', 'Ramesh', 'Rakesh', 'Lokesh'];  
    5. });  
    HTML
    1. <h2>AngularJS filter example</h2>  
    2. <div ng-app="app" ng-controller="filterCtrl">  
    3.     <p><input type="text" ng-model="txtname"></p>  
    4.     <ul>  
    5.         <li ng-repeat="x in names | filter : txtname">  
    6.             <h3> {{ x }} </h3> </li>  
    7.     </ul>  
    8. </div>  
    9. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
    10. <script src="App/app.js"></script>  
    11. <script src="Controller/filtercontroller.js"></script>  
    output

    output

  5. json - json is used to format an object to a json string. Example,

    app.js
    1. var app = angular.module('app', []);  
    2. filtercontroller.js  
    3. app.controller('filterCtrl', function($scope) {  
    4.     //json   
    5.     $scope.user = {  
    6.         "firstname": "Raj",  
    7.         "lastname": "Kumar",  
    8.         "country": "India",  
    9.         "phone": "484-433-3333"  
    10.     };  
    11.     $scope.cars = ["Audi", "BMW", "Ford"];  
    12. });  
    HTML
    1. <h2>AngularJS json filter example</h2>  
    2. <div ng-app="app" ng-controller="filterCtrl">  
    3.     <h1>User:</h1> <pre>{{user | json}}</pre> <pre>{{cars | json}}</pre> </div>  
    4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
    5. <script src="App/app.js"></script>  
    6. <script src="Controller/filtercontroller.js"></script>  
    output

  6. limitTo - limitTo is used to limits an array/string into a specified number of elements. Example,

    app.js
    1. var app = angular.module('app', []);  
    2. filtercontroller.js  
    3. app.controller('filterCtrl', function($scope) {  
    4.     //limitTo   
    5.     $scope.bikes = ["Honda", "Bajaj", "Harley", "TVS", "Yamaha", "Royal"];  
    6. });  
    HTML
    1. <h2>AngularJS limitTo filter example</h2>  
    2. <div ng-app="app" ng-controller="filterCtrl">  
    3.     <ul>  
    4.         <li ng-repeat="x in bikes | limitTo : 3 : 1">{{x}}</li>  
    5.     </ul>  
    6. </div>  
    7. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
    8. <script src="App/app.js"></script>  
    9. <script src="Controller/filtercontroller.js"></script>  
    output

  7. lowercase - lowercase is used to change a string to lowercase. Example,

    app.js
    1. var app = angular.module('app', []);  
    2. filtercontroller.js  
    3. app.controller('filterCtrl', function($scope) {  
    4.     //lowercase/uppercase   
    5.     $scope.myname = "Raj Kumar";  
    6. });  
    HTML
    1. <h2>AngularJS lowercase filter example</h2>  
    2. <div ng-app="app" ng-controller="filterCtrl">  
    3.     <h3>My name is {{ myname | lowercase }}</h3> </div>  
    4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
    5. <script src="App/app.js"></script>  
    6. <script src="Controller/filtercontroller.js"></script>  
    output

  8. uppercase - uppercase is used to change a string to uppercase. Example,

    app.js
    1. var app = angular.module('app', []);  
    2. filtercontroller.js  
    3. app.controller('filterCtrl', function($scope) {  
    4.     //lowercase/uppercase   
    5.     $scope.myname = "Raj Kumar";  
    6. });  
    HTML
    1. <h2>AngularJS uppercase filter example</h2>  
    2. <div ng-app="app" ng-controller="filterCtrl">  
    3.     <h3>My name is {{ myname | uppercase }}</h3> </div>  
    4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
    5. <script src="App/app.js"></script>  
    6. <script src="Controller/filtercontroller.js"></script>  
    output

  9. orderBy - orderBy is used to order an array by an expression. Example,

    app.js
    1. var app = angular.module('app', []);   
    filtercontroller.js
    1. app.controller('filterCtrl', function($scope)   
    2. {  
    3.     //orderBy   
    4.     $scope.location = [{  
    5.         name: 'Raj',  
    6.         country: 'India'  
    7.     }, {  
    8.         name: 'Mike',  
    9.         country: 'USA'  
    10.     }, {  
    11.         name: 'Deepak',  
    12.         country: 'Australia'  
    13.     }, {  
    14.         name: 'Tony',  
    15.         country: 'England'  
    16.     }, {  
    17.         name: 'Ronit',  
    18.         country: 'Denmark'  
    19.     }, {  
    20.         name: 'Den',  
    21.         country: 'Sweden'  
    22.     }, {  
    23.         name: 'John',  
    24.         country: 'Denmark'  
    25.     }, {  
    26.         name: 'Mark',  
    27.         country: 'England'  
    28.     }, {  
    29.         name: 'Andrew',  
    30.         country: 'Norway'  
    31.     }];  
    32. });  
    HTML
    1. <h2>AngularJS orderBy filter example</h2>  
    2. <div ng-app="app" ng-controller="filterCtrl">  
    3.     <ul>  
    4.         <li ng-repeat="x in location | orderBy:'country'">  
    5.             <h3> {{ x.name + ', ' + x.country }} </h3> </li>  
    6.     </ul>  
    7. </div>  
    8. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  
    9. <script src="App/app.js"></script>  
    10. <script src="Controller/filtercontroller.js"></script>  

output

Conclusion

In this article, we have learned about all the filters of AngularJS. If you have question or comments, download the attached sample or post me a comment in C# Corner comment section.


Similar Articles