AngularJS Lowercase



  • The lowercase filter is used to change a string to lowercase string or letters.

Syntax for lowercase filter in AngularJS:

{{ expression | lowercase }}

Sample coding for lowercase filter in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="lcaseCtrl">
            <h2>Wikitechy lowercase filter in AngularJS </h2>
                <h3>The lowercase filter text is : “ {{ msg | lowercase}} ”</h3>
        </div>
        <script>
            var app = angular.module( 'myApp', [] );
            app.controller('lcaseCtrl', function($scope) {
                $scope.msg = “WELCOME TO ANGULARJS TUTORIALS”;
            });
        </script>
    </body>
</html>

lowercase Filter in AngularJS:

<h3>The lowercase filter text is : “ {{ msg | lowercase}} ”</h3>
  • The msg string value will be displayed in lowercase format.

Data:

  • Collection of data has been defined in AngularJS Application.
msg = “WELCOME TO ANGULARJS TUTORIALS”;

Logic:

  • Controller logic for the AngularJS Application.
app.controller('lcaseCtrl', function($scope)
    {
        $scope. msg = “WELCOME TO ANGULARJS TUTORIALS”;
    });

HTML:

  • Viewable HTML contents in AngularJS Application.
<div ng-app="myApp" ng-controller="lcaseCtrl">
    <h2>Wikitechy lowercase filter in AngularJS </h2>
    <h3>The lowercase filter text is : “ {{ msg | lowercase }} ” </h3>
</div>

Code Explanation for lowercase filter in AngularJS:

Code Explanation for AngularJS Lowercase Filter

  1. AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
  2. The AngularJS application is defined by ng-app="myApp". The application runs inside the <div> tag. It’s also used to define a <div> tag as a root element.
  3. The ng-controller=”lcaseCtrl” is an AngularJS directive. It is used to define a controller name as “lcaseCtrl”.
  4. The lowercase filter is used to change an msg string to lowercase.
  5. The angular.module function is used to create a Module.
  6. Here we have declared a controller lcaseCtrl module using apps.controller() function. The value of the controller modules is stored in scope object. In AngularJS, $scope is passed as first argument to apps.controller during its constructor definition.
  7. Here we have set the value of $scope. msg = “WELCOME TO ANGULARJS TUTORIALS” which are to be used to change a string to lowercase in HTML element.

Sample Output for lowercase filter in AngularJS:

Sample Output for AngularJS Lowercase Filter

  1. The output shows that a lowercase filter is used to change a string “WELCOME TO ANGULARJS TUTORIALS” to lowercase letter “welcome to angularjs tutorials”.



Related Searches to angularjs lowercase filter