0

I am trying to create a simple Angular code base where I am trying to concatenate 2 different values in a angular controller method, but it returns the complete method as its value rather than calculating the value.. Please help.

<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
    <html  ng-app="myApp">
        <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

        <body>
        <div ng-controller="personCtrl">
            <p>Input something in the input box:</p>
            <p>First Name - <input type="text" ng-model="firstName" /></p>
            <p>Last Name - <input type="text" ng-model="lastName" /></p>
            <p> Full Name - {{fullName}} </p>
        </div>

        <script>
            angular.module('myApp', []).controller('personCtrl', function($scope) {
                $scope.firstName = 'John';
                $scope.lastName = 'Doe';
                $scope.fullName = function() {
                    return $scope.firstName + '' + $scope.lastName;
                };
                console.log('-->' + $scope.fullName);
            });
        </script>
        </body>
    </html>

</apex:page>

Console log gives me following output -

-->function () {
                    return $scope.firstName + '' + $scope.lastName;
                }

Thanks, Ray

1

Looks like simple issue with Syntax .

You will need to call the function since its a function

<apex:page standardStylesheets="false" sidebar="false" showHeader="false" applyHtmlTag="false">
<html  ng-app="myApp">
    <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        angular.module('myApp', []).controller('personCtrl', function($scope) {
            $scope.firstName = 'John';
            $scope.lastName = 'Doe';
            $scope.fullName = function() {
                return $scope.firstName + '' + $scope.lastName;
            };
            console.log('-->' + $scope.fullName);
        });
    </script>
      <body>
        <div ng-controller="personCtrl">
            <p>Input something in the input box:</p>
            <p>First Name - <input type="text" ng-model="firstName" /></p>
            <p>Last Name - <input type="text" ng-model="lastName" /></p>
            <p> Full Name - {{fullName()}} </p>
        </div>
    </body>
</html>

| improve this answer | |
  • As @Mohith gave the first answer, so choosing same..!! Thanks everyone – Kaushik Ray Sep 26 '15 at 19:33
0

This question is way off topic, as it isn't about Salesforce other than the fact that you've got it in a VF page.

That said, the reason you are seeing the result you are is because .fullName is a function not a property containing a string. Adding parentheses will call the function, calculate the result and show you what you expect.

console.log('-->' + $scope.fullName());

| improve this answer | |
0

Since fullname is a function, Adding the parenthesis will work.

<p> Full Name - {{fullName()}} </p>

Angular will calculate the function return value and display it on the UI

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.