Convert a String or Text to Uppercase in AngularJS

Often developers look for a quick solution to convert a string to uppercase or transform text values to uppercase while typing into an input box. If you were thinking about a conventional method, you would have end up writing a small script at the client side, for this little transformation to work. The CSS “text-transform” property is a good alternative, but ineffective in certain cases. However, if you have switched to AngularJS for your web development solutions, then you have two simple ways to transform the text into uppercase in AngularJS.

I have previously written about AngularJS features and explained how simple and yet useful these features are, specially the filters.

Talking about AngularJS filters, its primary use is to modify (or transform) data before presenting it to the user. Here, in this article I’ll show you how to use AngularJS uppercase filter to convert a text in an input box to an upper case string value.

There are two different ways to do it. You can either declare the uppercase filter with an AngularJS expression or you can declare the filter inside an AngularJS $scope using JavaScript.

Using “uppercase” Filter with in AngularJS Expression

The Markup

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
    <div ng-app
        <p>
            <label>Enter your name (in lower case)</label>
            <input type="text" ng-model="yourname" />
        </p>

        <p> {{ yourname | uppercase }} </p>
    </div>
</body>
</html>

Try it

Output

AngularJS Filter uppercase

In the above example, I have declared a variable yourname using the ng-model directive. Later, I have defined the variable in the Angular expression (with in curly braces). See, how I have used the filter uppercase inside the expression, separated by the “|” (pipe) symbol. Perhaps in AngularJS, this is simplest way to transform a text to an upper case value, while typing in an input box.

By Injecting $filter Dependency to the Controller in JavaScript

The Markup

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>

<body>
    <div ng-app="upApp" 
        ng-controller="textController">
        <p>Enter some text in the textbox and it will convert it into uppercase.</p>
        <p>
            <input type="text" placeholder="Enter some text" ng-model="yourname" />
        </p>
    </div>
</body>

<script>
    var upperApp = angular.module('upApp', []);

    upperApp.controller(
        'textController',
        function ($scope, $filter) {

            $scope.$watch('yourname', function (val) {
                $scope.yourname = $filter('uppercase')(val);
            }, true);
        }
    );
</script>
</html>

Try it

First, I have initialized the application and defined a controller. Inside the controller, I have defined a $filter object along with $scope object. This process often refers to as injecting will allow us to add $filter dependency (properties) into the controller. Once injected, I can now add a pre-defined filter inside the controller to get the desired result.

The $filter object in our example, takes a single string parameter, and I have assigned the value uppercase for the parameter. Now, I have to pass a value (text in the input box), which I wish to convert to uppercase using the filter. To fetch the value from the model, I am using $watch API.

Learn more about $filter Service.

The $watch API, keeps an eye on the changes, which occur to all the values that are attached to application $scope. Here in the example, the model “yourname” is attached to the $scope, and using $watch it can detect the values typed in the input box control. The typed value (“val”) in passed to the filter, which then returns the converted value (uppercase) to the model.

Conclusion

Both the methods, which I have described in this article for converting or transforming text to uppercase in AngularJS, are efficient methods, albeit in their usage scenarios. It reminds me of other conventional methods, particularly the one that I have described in the beginning of this article that is, using CSS text-transform property.

text-transform: uppercase;

This property would display the text in uppercase, however when you submit the value, it remains the same. See the below example.

<!DOCTYPE html>
<html>
<head>
    <style>
        input {text-transform:uppercase;}
    </style>
</head>
<body>
    <label>Enter your name (in lower case)</label>

    <input type="text" id="name" />
    <input type="button" value="Submit" 
        onclick="javascript:alert(document.getElementById('name').value)" />
</body>
</html>

I am sure you have learned few interesting and useful tricks on AngularJS here in this article. Thanks for reading. 🙂

← PreviousNext →