AngularJS Uppercase

The uppercase filter is used to change a string to uppercase string or letters.

Syntax for uppercase filter in AngularJS:

{{ expression | uppercase }}

Sample coding for uppercase 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="ucaseCtrl">
            <h2>Wikitechy uppercase filter in AngularJS</h2>
            <h3>The uppercase filter text is : “{{ msg | uppercase}} ”</h3>
        </div>
        <script>
            var app = angular.module( 'myApp', [] );
            app.controller('ucaseCtrl', function($scope) {
                $scope.msg = “Welcome To AngularJS Tutorials”;
            });
        </script>
    </body>
</html>

uppercase Filter in AngularJS:

<h3>The uppercase filter text is : “{{ msg | uppercase}} ”</h3>

The msg string value will be displayed in uppercase 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('ucaseCtrl', function($scope) 
    {
        $scope. msg = “Welcome To AngularJS Tutorials”;
    });

HTML:

Viewable HTML contents in AngularJS Application.

<div ng-app="myApp" ng-controller="ucaseCtrl">
    <h2>Wikitechy uppercase filter in AngularJS</h2>
    <h3>The uppercase filter text is : “{{ msg | uppercase}} ”</h3>
</div>

Code Explanation for uppercase filter in AngularJS:

Code Explanation for AngularJS Uppercase Filter

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=”ucaseCtrl” is an AngularJS directive. It is used to define a controller name as “ucaseCtrl”.
The uppercase filter is used to change an msg string to uppercase.
The angular.module function is used to create a Module.
Here we have declared a controller ucaseCtrl 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 uppercase in HTML element.

Sample Output for uppercase filter in AngularJS:

Sample Output for AngularJS Uppercase Filter

The output shows that an uppercase filter is used to change a string “Welcome To AngularJS Tutorials” to uppercase letter “WELCOME TO ANGULARJS TUTORIALS”.

PDF

AngularJS Uppercase

Syntax for uppercase filter in AngularJS:

Sample coding for uppercase filter in AngularJS:

uppercase Filter in AngularJS:

Data:

Logic:

HTML:

Code Explanation for uppercase filter in AngularJS:

Sample Output for uppercase filter in AngularJS:

Related Searches to angularjs uppercase filter

Wikitechy

Join our Community

Other Languages