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
   

   var app = angular.module('app', []);

   filtercontroller.js
   

   app.controller('filterCtrl', function($scope)
   {
       $scope.price = 755;
   });

   HTML
   

   <h2>AngularJS currency filter example</h2>
   <div ng-app="app" ng-controller="filterCtrl">
       <h1>Price: {{ price | currency }}</h1> </div>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   <script src="App/app.js"></script>
   <script src="Controller/filtercontroller.js"></script>

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

   var app = angular.module('app', []);

   filtercontroller.js
   

   app.controller('filterCtrl', function($scope)
   {
       $scope.prize = 50000000;
       $scope.weight = 5555;
   });

   HTML
   

   <h2>AngularJS number filter example</h2>
   <div ng-app="app" ng-controller="filterCtrl">
       <h1>Price: {{ prize | number }}</h1>
       <h1>Weight: {{weight | number : 3}} kg</h1> </div>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   <script src="App/app.js"></script>
   <script src="Controller/filtercontroller.js"></script>

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

   var app = angular.module('app', []);

   filtercontroller.js
   

   app.controller('filterCtrl', function($scope)
   {
       //date
       $scope.today = new Date();
   });

   HTML
   

   <h2>AngularJS date filter example</h2>
   <div ng-app="app" ng-controller="filterCtrl">
       <h1>Date = {{ today | date }}</h1>
       <h1>Date = {{ today | date : "dd.MM.y" }}</h1>
       <h1>Date = {{ today | date : "fullDate" }}</h1>
       <h1>Date = {{ "2016-01-05T09:05:05.035Z" | date }}</h1> </div>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   <script src="App/app.js"></script>
   <script src="Controller/filtercontroller.js"></script>

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

   var app = angular.module('app', []);

   filtercontroller.js
   

   app.controller('filterCtrl', function($scope)
   {
       //filter
       $scope.names = ['Raj', 'Kumar', 'Beniwal', 'Pari', 'Yash', 'Naresh', 'Ramesh', 'Rakesh', 'Lokesh'];
   });

   HTML
   

   <h2>AngularJS filter example</h2>
   <div ng-app="app" ng-controller="filterCtrl">
       <p><input type="text" ng-model="txtname"></p>
       <ul>
           <li ng-repeat="x in names | filter : txtname">
               <h3> {{ x }} </h3> </li>
       </ul>
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   <script src="App/app.js"></script>
   <script src="Controller/filtercontroller.js"></script>

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

   var app = angular.module('app', []);
   filtercontroller.js
   app.controller('filterCtrl', function($scope) {
       //json
       $scope.user = {
           "firstname": "Raj",
           "lastname": "Kumar",
           "country": "India",
           "phone": "484-433-3333"
       };
       $scope.cars = ["Audi", "BMW", "Ford"];
   });

   HTML
   

   <h2>AngularJS json filter example</h2>
   <div ng-app="app" ng-controller="filterCtrl">
       <h1>User:</h1> <pre>{{user | json}}</pre> <pre>{{cars | json}}</pre> </div>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   <script src="App/app.js"></script>
   <script src="Controller/filtercontroller.js"></script>

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

   var app = angular.module('app', []);
   filtercontroller.js
   app.controller('filterCtrl', function($scope) {
       //limitTo
       $scope.bikes = ["Honda", "Bajaj", "Harley", "TVS", "Yamaha", "Royal"];
   });

   HTML
   

   <h2>AngularJS limitTo filter example</h2>
   <div ng-app="app" ng-controller="filterCtrl">
       <ul>
           <li ng-repeat="x in bikes | limitTo : 3 : 1">{{x}}</li>
       </ul>
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   <script src="App/app.js"></script>
   <script src="Controller/filtercontroller.js"></script>

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

   var app = angular.module('app', []);
   filtercontroller.js
   app.controller('filterCtrl', function($scope) {
       //lowercase/uppercase
       $scope.myname = "Raj Kumar";
   });

   HTML
   

   <h2>AngularJS lowercase filter example</h2>
   <div ng-app="app" ng-controller="filterCtrl">
       <h3>My name is {{ myname | lowercase }}</h3> </div>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   <script src="App/app.js"></script>
   <script src="Controller/filtercontroller.js"></script>

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

   var app = angular.module('app', []);
   filtercontroller.js
   app.controller('filterCtrl', function($scope) {
       //lowercase/uppercase
       $scope.myname = "Raj Kumar";
   });

   HTML
   

   <h2>AngularJS uppercase filter example</h2>
   <div ng-app="app" ng-controller="filterCtrl">
       <h3>My name is {{ myname | uppercase }}</h3> </div>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   <script src="App/app.js"></script>
   <script src="Controller/filtercontroller.js"></script>

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

   var app = angular.module('app', []);

   filtercontroller.js
   

   app.controller('filterCtrl', function($scope)
   {
       //orderBy
       $scope.location = [{
           name: 'Raj',
           country: 'India'
       }, {
           name: 'Mike',
           country: 'USA'
       }, {
           name: 'Deepak',
           country: 'Australia'
       }, {
           name: 'Tony',
           country: 'England'
       }, {
           name: 'Ronit',
           country: 'Denmark'
       }, {
           name: 'Den',
           country: 'Sweden'
       }, {
           name: 'John',
           country: 'Denmark'
       }, {
           name: 'Mark',
           country: 'England'
       }, {
           name: 'Andrew',
           country: 'Norway'
       }];
   });

   HTML

10. <h2>AngularJS orderBy filter example</h2>
    <div ng-app="app" ng-controller="filterCtrl">
        <ul>
            <li ng-repeat="x in location | orderBy:'country'">
                <h3> {{ x.name + ', ' + x.country }} </h3> </li>
        </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="App/app.js"></script>
    <script src="Controller/filtercontroller.js"></script>

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.