×

Html & Html5

The World's best Software Development Study Portal

AngularJS Filters


  • we can add filters to expressions by using the pipe character |, followed by a filter.

  • AngularJS provides filters to transform data like.

  • currency Format a number to a currency format.

    date Format a date to a specified format.

    filter Select a subset of items from an array.

    json Format an object to a JSON string.

    limitTo Limits an array/string, into a specified number of elements/characters.

    lowercase Format a string to lower case.

    number Format a number to a string.

    orderBy Orders an array by an expression.

    uppercase Format a string to upper case.



    Example of uppercase filter
    
        <div ng-app="myApp" ng-controller="personCtrl">
    
        <p>The name is {{ lastName | uppercase }}</p>
    
        </div>
    
        <script>
        angular.module('myApp', []).controller('personCtrl', function($scope) {
        $scope.firstName = "John",
        $scope.lastName = "Doe"
        });
        </script>
    
    Output
    The name is DOE



    Example of lowercase filter
    
        <div ng-app="myApp" ng-controller="personCtrl">
    
        <p>The name is {{ lastName | uppercase }}</p>
    
        </div>
    
        <script>
        angular.module('myApp', []).controller('personCtrl', function($scope) {
        $scope.firstName = "John",
        $scope.lastName = "Doe"
        });
        </script>
    
    Output
    The name is doe



    Example of currency filter
    
        <div ng-app="myApp" ng-controller="costCtrl">
    
        <h5>Price: {{ price | currency }}</h5>
    
        </div>
    
        <script>
        var app = angular.module('myApp', []);
        app.controller('costCtrl', function($scope) {
        $scope.price = 58;
        });
        </script>
    
    
    Output
    Price: {{ price | currency }}