Convert Text To Uppercase Using AngularJS

Introduction

In this article I will tell you how to convert text into uppercase letters using AngularJS.

AngularJS provides a feature for converting all the letters of text into uppercase letters. I will explain this feature by creating a sample application.

Step 1

First of all you need to add an external Angular.js file to your application, in other words "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.

</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.

Now I will create a simple application that will help you understand this filter.

First I will create a JavaScript function in which some initial values will be passed.

function x($scope) {

$scope.test = "this text will be displayed in Uppercase";

}

</script>

Here I have created a function named "x", in this function the initial value is passed to a variable named "test", this text is the text that will be converted into the Uppercase Letters but as you can see that at this point all the letters are in lowercase letters.

Step 3

Our work on View is completed and now I will work on the View Model of this application.

<body>

Without Uppercase:- <p>{{test}}</p>

</div>

</form>

</body>

Here a Div is created that is bound to the function using the ng-controller.

In this Div a <p> tag is used that is bound to the initial value but it's not made to be converted into uppercase.

If at this time I run the application than a simple output like this one will be seen:

uppercase using angularjs

Nothing is converted to uppercase, 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 uppercase.

<body>

Without Uppercase:- <p>{{test}}</p>

<br />

With Uppercase:- <p>{{test|uppercase}}</p>

</div>

</form>

</body>

In the second <p> tag you can see that I had again bound the initial value but with it one more thing is written, in other words uppercase, this should be written in this format: {{ uppercase_expression | uppercase}}. Now if I run the application then an output like this one can be seen:

uppercase using angularjs

The complete code of this application is as follows:

function x($scope) {

$scope.test = "this text will be displayed in Uppercase";

}

</script>

</head>

<body>

Without Uppercase:- <p>{{test}}</p>

<br />

With Uppercase:- <p>{{test|uppercase}}</p>

</div>

</form>

</body>

</html>