Angular - How to change the $scope property value via the function in the $scope

Question

How can I change the $scope property value via the function in the $scope?

html,

<div ng-app="myApp" ng-controller="SimpleController">{{greeting}}</div>

angular,

var app = angular.module("myApp", []);

app.controller('SimpleController', function($scope) {
    $scope.name = "World";
    $scope.greeting = "Hi";
    $scope.sayHello = function() {
        return $scope.greeting = "Hello " + $scope.name;
    };
});

Result,

Hi

What I expect,

Hello World

Or, can I add properties to $scope via function?

app.controller('SimpleController', function($scope) {
    $scope.name = "World";
    $scope.sayHello = function() {
        return $scope.greeting = "Hello " + $scope.name;
    };
});

html,

<div ng-app="myApp" ng-controller="SimpleController">{{greeting}}</div>

I get nothing...

Any ideas?

can I call it like this - <div ng-app="myApp" ng-controller="SimpleController">{{sayHello(); greeting}}</div>? — Run
– Run, Commented Jul 3, 2015 at 10:04
ya sure you call like this get call sayhello refer to my answer — Shubham Nigam
– Shubham Nigam, Commented Jul 3, 2015 at 10:13

Kalhan · Accepted Answer · 2015-07-03 10:07:14Z

2

ok, $scope.greeting is defined inside the $scope.sayHello function so there is no scope property called greeting until sayHello() function execute.

execute the functin and greeting will be available in the HTML

app.controller('SimpleController', function($scope) {
    $scope.name = "World";
    $scope.sayHello = function() {
        return $scope.greeting = "Hello " + $scope.name;
    };

    //execute the function after execution greeting will be available in the html
    $scope.sayHello();
});

Example

it doesn't matter return or not return anything

inside that function

 return $scope.greeting = "Hello " + $scope.name;

first $scope.greeting assign the value so then after this there will have the $scope.greeting to the html.

edited Jul 3, 2015 at 10:07

answered Jul 3, 2015 at 10:01

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thomaux · Accepted Answer · 2015-07-03 10:02:13Z

2

You don't need to return the assignment, simply set the $scope property and it will work.

Update your method to:

$scope.sayHello = function() {
    $scope.greeting = "Hello " + $scope.name;
};

answered Jul 3, 2015 at 10:02

thomaux

19.8k10 gold badges83 silver badges107 bronze badges

Comments

Shubham Nigam · Accepted Answer · 2015-07-03 10:05:29Z

1

You all need to do is:

html,

<div ng-app="myApp" ng-controller="SimpleController">{{sayHello()}}</div>

angular,

var app = angular.module("myApp", []);

app.controller('SimpleController', function($scope) {
    $scope.name = "World";
    $scope.greeting = "Hi";
    $scope.sayHello = function() {
        return $scope.greeting = "Hello " + $scope.name;
    };
});

I hope it will solve your problem

answered Jul 3, 2015 at 10:05

Shubham Nigam

3,96821 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular - How to change the $scope property value via the function in the $scope

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related