AngularJS lowercase Filter
AngularJS provides different filters to format the data. The lowercase Filter formats the given string to the lowercase. In order to transmit & render the data from a TypeScript code to an HTML template (view), the interpolation concept can be utilized. The lowercase filter is piped with an expression that is declared inside the interpolation syntax.
Syntax:
{{expression|lowercase}}
Example 1: This example describes the AngularJS lowercase Filter by converting the entered string to lowercase.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> </head> <body style="text-align:center;"> <h1 style="color:green">GeeksforGeeks</h1> <h3>AngularJS lowercase Filter</h3> <div ng-app="myApp" ng-controller="myCtrl"> <strong>Input:</strong> <br> <input type="text" ng-model="string"> <br> <strong>Output:</strong> <br> {{string|lowercase}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.string = ""; }); </script> </body> </html> |
Output:
Example 2: This example describes the AngularJS lowercase Filter by transforming the multiple lines of strings.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> </head> <body style="text-align:center;"> <h1 style="color:green">GeeksforGeeks</h1> <h3>AngularJS lowercase Filter</h3> <div ng-app="myApp" ng-controller="myCtrl"> <strong>First Name:</strong> <br> <input type="text" ng-model="firstName"> <br> <strong>Last Name:</strong> <br> <input type="text" ng-model="lastName"> <br> <strong>Output:</strong> <br> {{firstName|lowercase}} {{lastName|lowercase}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.firstName = ""; $scope.lastName = ""; }); </script> </body> </html> |
Output:
Please Login to comment...