Assign function to variable angularjs

Question

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

dont use {{}} if you want to access a variable. just use the variable name — cute_programmer
– cute_programmer, Commented Jan 8, 2018 at 7:54

Christian Santos · Accepted Answer · 2018-01-08 07:57:39Z

1

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

answered Jan 8, 2018 at 7:57

Christian Santos

5,4551 gold badge20 silver badges24 bronze badges

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

2 Comments

Kumail Hussain Over a year ago

what if functions have parameter too?

Christian Santos Over a year ago

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)"

Immanuel Kirubaharan · Accepted Answer · 2018-01-08 07:58:54Z

0

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>

edited Jan 8, 2018 at 7:58

Immanuel Kirubaharan

1,1041 gold badge11 silver badges18 bronze badges

answered Jan 8, 2018 at 7:56

cute_programmer

3723 silver badges14 bronze badges

Collectives™ on Stack Overflow

Assign function to variable angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related