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:
AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
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.
The ng-controller=”lcaseCtrl” is an AngularJS directive. It is used to define a controller name as “lcaseCtrl”.
The lowercase filter is used to change an msg string to lowercase.
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.
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:
The output shows that a lowercase filter is used to change a string “WELCOME TO ANGULARJS TUTORIALS” to lowercase letter “welcome to angularjs tutorials”.
angular lowercase inputangular.lowercase vs tolowercaseangular filter first letter uppercaseangular 2 lowercaseangular sentence case filterangular filter exampleangular lowercase inputangular custom filterangular multiple filtersangular built in filtersangularjs uppercase exampleangularjs filter first letterconvert string to uppercase in angularjsangularjs tutorials
