Menu ▼


AngularJS expression strings example

In this article we will see how to use AngularJS expression with strings.

Example:
Example 1:
In this example we will concatenate two strings using expression {{ firstName }} {{ lastName }}. If the value in the input controls change then the value in the expression will be updated automatically.

Enter First Name :
Enter Last Name :

Hello {{ firstName }} {{ lastName }}

Example 2:
In this example we will calculate the length of the string using expression {{ fullName.length }}.

Enter your name :

length of your name is : {{fullName.length}}
Example 3:
In this example we will covnert the input string to Lowercase & Uppercase using expression {{ inputname1 | lowercase }} && {{ inputname1 | uppercase }}.

Enter name :

Lowercase : {{ inputname1 | lowercase }}
Uppercase : {{ inputname1 | uppercase }}

Source code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="SampleApp" ng-controller="SampleCntrl">
        <strong>Example 1:</strong>
        <br />
        In this example we will concatenate two strings using expression <strong>{{ <em>firstName</em>
            }} {{ <em>lastName</em> }}</strong>. If the value in the input controls change
        then the value in the expression will be updated automatically.
        <br />
        <br />
        <table>
            <tr>
                <td>
                    Enter First Name :
                </td>
                <td>
                    <input type="text" ng-model="firstName" /><br />
                </td>
            </tr>
            <tr>
                <td>
                    Enter Last Name :
                </td>
                <td>
                    <input type="text" ng-model="lastName" /><br />
                </td>
            </tr>
        </table>
        <br />
        Hello {{ firstName }} {{ lastName }}
        <br />
        <hr />
        <strong>Example 2:</strong>
        <br />
        In this example we will calculate the length of the string using expression <strong>
            {{ <em>fullName.length</em> }}</strong>.
        <br />
        <br />
        Enter your name :
        <input type="text" ng-model="fullName" /><br />
        <br />
        length of your name is : {{fullName.length}}
        <hr />
        <strong>Example 3:</strong>
        <br />
        In this example we will covnert the input string to Lowercase & Uppercase using
        expression <strong>{{ <em>inputname1 | lowercase</em> }} && {{ <em>inputname1 | uppercase</em>
            }}</strong>.
        <br />
        <br />
        Enter name :<input type="text" ng-model="inputname1" />
        <br />
        <br />
        Lowercase : {{ inputname1 | lowercase }}<br />
        Uppercase : {{ inputname1 | uppercase }}
    </div>
    <script>
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.firstName = "Dotnet";
            $scope.lastName = "Learners";
            $scope.fullName = "Dotnet Learners";
            $scope.inputname1 = "Dotnet Learners";
        });
    </script>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com