Assign function to variable angularjs

Question 1

I want to call function dynamically based on variable and the variable has the function name , for example

var fun =function1(1,2)

after sometimes variable fun can have function

fun= function2(2,3)

its just an example to explain my scenario

and then I want to call it from my html

html

<button ng-click="{{fun}}>call</button>

fun can have function1 and function2 sometimes

Question 2

dont use {{}} if you want to access a variable. just use the variable name

Question 3

Because functions are first-class citizens in JavaScript, we can pass them around like we would with any other variable.

See this JSFiddle example that alternates f1 and f2 when you click on Change Handler.

HTML

<body ng-app="exampleApp" ng-controller="appCtrl">
 <div>
 <h3>{{name}}</h3>
 <br>
 <button type="button" class="btn btn-primary" ng-click="fun()">Show Name</button>
 <button type="button" class="btn btn-primary" ng-click="changeClick()">
 Change Handler
 </button>
 <br>
 <h3 ng-show="clicked">You did it {{name}}</h3>
 </div>
</body>

JavaScript

var app = angular.module('exampleApp', []);
app.controller('appCtrl', function($scope){
 function f1() {
 $scope.name = "Chris";
 }
 function f2() {
 $scope.name = "Harry";
 }
 $scope.fun = f1;
 $scope.changeClick = function() {
 if($scope.fun === f1) {
 $scope.fun = f2;
 } else {
 $scope.fun = f1;
 }
 };
 $scope.name = "Default";
});

In the example above, changeClick alternates the value of fun

Question 4

what if functions have parameter too?

Question 5

No problem -- you would still change them the same way, regardless of whether they have parameters or not. Just make sure you pass in the parameters when you call the function in ng-click. For example ng-click="fun(param1, param2)"

Question 6

dont use {{}} if you want to access a variable. just use the variable name

function foo() {
 console.log("executing foo");
}
$scope.fun = foo;
<button ng-click="fun()">call</button>

Christian Santos 5,4551 gold badge20 silver badges24 bronze badges · Accepted Answer · 2018-01-08 07:57:39Z

Because functions are first-class citizens in JavaScript, we can pass them around like we would with any other variable.

See this JSFiddle example that alternates f1 and f2 when you click on Change Handler.

HTML

<body ng-app="exampleApp" ng-controller="appCtrl">
 <div>
 <h3>{{name}}</h3>
 <br>
 <button type="button" class="btn btn-primary" ng-click="fun()">Show Name</button>
 <button type="button" class="btn btn-primary" ng-click="changeClick()">
 Change Handler
 </button>
 <br>
 <h3 ng-show="clicked">You did it {{name}}</h3>
 </div>
</body>

JavaScript

var app = angular.module('exampleApp', []);
app.controller('appCtrl', function($scope){
 function f1() {
 $scope.name = "Chris";
 }
 function f2() {
 $scope.name = "Harry";
 }
 $scope.fun = f1;
 $scope.changeClick = function() {
 if($scope.fun === f1) {
 $scope.fun = f2;
 } else {
 $scope.fun = f1;
 }
 };
 $scope.name = "Default";
});

In the example above, changeClick alternates the value of fun

No problem -- you would still change them the same way, regardless of whether they have parameters or not. Just make sure you pass in the parameters when you call the function in ng-click. For example ng-click="fun(param1, param2)"

CollectivesTM on Stack Overflow

Assign function to variable angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related