网捷达

In this article, we will see how to concat strings in AngularJS. There are few ways to concat the strings in AngularJS. In this article, we will see 2 of them.

Example 1: In the first example, we are using the '+' operator to concat the strings

HTML

<!DOCTYPE HTML> 
<html> 

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.str1 = 'This is ';
            $scope.str2 = 'GeeksForGeeks';
            $scope.res = '';
            $scope.join = function() {
                $scope.res = $scope.str1 + $scope.str2;
            };
        });
    </script>
</head>

<body style = "text-align:center;">
    <h1 style = "color:green;">  
        GeeksForGeeks  
    </h1>

    <p>
        How to concat strings in AngularJS
    </p>

    <div ng-app = "app">  
        <div ng-controller = "controller">
            str1 - '{{str1}}'
            <br>
            str2 - '{{str2}}'
            <br>
            <br>
            <input type = "button" 
                ng-click = "join()" value = "Click Here">
            <br>
            
            <p>Result = '{{res}}'</p>
        </div>
    </div>
</body>   

</html>

Output:

Example 2: In the second example we will use the standard concat() method for concatenation.

HTML

<!DOCTYPE HTML> 
<html> 

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>

    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.str1 = 'This is ';
            $scope.str2 = 'GeeksForGeeks';
            $scope.res = '';
            $scope.join = function() {
                $scope.res = $scope.str1.concat($scope.str2);        
            };
        });
    </script>
</head>

<body style = "text-align:center;">
    <h1 style = "color:green;">  
        GeeksForGeeks  
    </h1>
   
    <p>
        How to concat strings in AngularJS
    </p>

    <div ng-app = "app">  
        <div ng-controller = "controller">
            str1 - '{{str1}}'
            <br>
            str2 - '{{str2}}'
            <br>
            <br>
            <input type = "button" 
                ng-click = "join()" value = "Click Here">
            <br>
            
            <p>Result = '{{res}}'</p>
        </div>
    </div>
</body>   

</html>

Output:

How to concat strings using AngularJS ?

Explore