Introduction
In my previous article I told you how to Convert a Data into Uppercase Letters Using AngularJS.
In this article I will tell you how to convert text into lowercase letters using AngularJS.
AngularJS provides a feature by which you can convert all the letters of some text into uppercase letters or uppercase letters can be converted into lowercase letters. I will explain this with a sample application.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link and download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application as in the following:
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the External JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a simple application that will help you understand this feature.
First I will create a JavaScript function in which some initial values will be passed.
<script>
function x($scope) {
$scope.test = "this text will be displayed in Uppercase";
$scope.test1 = "THIS TEXT WILL BE DISPLAYED IN LOWERCASE";
}
</script>
Here I have created a function named "x". In that function some initial values are passed to variables named "test" and "test1", the text provided in the "text" will be converted into uppercase letters but as you can see, at this point all the letters are in lowercase letters. Similarly text provided in the "text1" will be converted into lowercase letters but right now they are in capital letters.
Step 3
Our work on the View is complete. Now I will work on the View Model of this application.
<body>
<form id="form1" runat="server">
<div ng-controller="x">
Without Lowercase:- <p>{{test1}}</p>
<br />
With Uppercase:- <p>{{test|uppercase}}</p>
</div>
</form>
</body>
Here a Div is created that is bound to the function using the ng-controller.
In this Div two <p> tags are taken, the first one is bound to the initial value of test1 but right now nothing special is done so it will not convert the data into lowercase. The second <p> tag is bound to the "test" but along with it "uppercase" is also written so it will convert the text into the uppercase letters.
If at this time I run the application then output like this will be seen:
![convert into lowercase using AngularJS]()
Nothing is converted to lowercase, that's because I have not applied anything to convert it but now I will add one more <p> tag and will convert the text to lowercase.
<body>
<form id="form1" runat="server">
<div ng-controller="x">
Without Lowercase:- <p>{{test1}}</p>
<br />
With Uppercase:- <p>{{test|uppercase}}</p>
<br />
With Lowercase:- <p>{{test1|lowercase}}</p>
</div>
</form>
</body>
In the third <p> tag you can see that I had again bound the initial value but with it one more thing is written, lowercase, this should be written in this format: {{ lowercase_expression | lowercase}}. Now if I run the application then output like this can be seen:
![]()
Complete Code
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope) {
$scope.test = "this text will be displayed in Uppercase";
$scope.test1 = "THIS TEXT WILL BE DISPLAYED IN LOWERCASE";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="x">
Without Lowercase:- <p>{{test1}}</p>
<br />
With Uppercase:- <p>{{test|uppercase}}</p>
<br />
With Lowercase:- <p>{{test1|lowercase}}</p>
</div>
</form>
</body>
</html>