Make dynamic function on ng-click

Question

I have a button like this

<button ng-click="method = 'create'; title = 'Create'>create</button> <button ng-click="method = 'update'; title = 'Update'>update</button> 

and this one

 <button ng-click="create(param)">{{ title }}</button> <button ng-click="update(param)">{{ title }}</button> 

The code above works fine, but I want to make it dynamic.

so i modify it as below.

 <button ng-click="{{ method }}(param)">{{ title }}</button> 

This does not work, I do not know why, although if I check the element, the code above generates the corrected code, as mentioned earlier.

Answer 1

Using parenthesis designation :

 <button ng-click="this[method](param)">{{ title }}</button> 

this points to the current scope object, so with this[method] you can access the method through the variable name.

Answer 2

This did not work for me .. and ..

I didn't want to have html code in my angular app or directives or using eval. so I just wrapped my existing functions in a function:

 $scope.get_results = function(){ return { message: "A message", choice1: {message:"choice 1 message", f: function(){$scope.alreadyDefinedFunction1()}}, choice2: {message:"choice 2 message", f: function(){$scope.alreadyDefinedFunction2()}}, }; } 

in another function:

 $scope.results2 = $scope.get_results(); 

HTML snippet:

 <ul class="dropdown-menu scroll-div"> <li><a ng-click="results2.choice1.f()">{{results_2_menu.choice1.message}}</a></li> <li><a ng-click="results2.choice2.f()">{{results_2_menu.choice2.message}}</a></li> </ul> 

Based on this js fiddle: http://jsfiddle.net/cdaringe/FNky4/1/

Answer 3

This syntax seems to work well

 <button ng-click="this[method(param)]">{{ title }}</button> 

starting with the dfsq user’s suggestion and since the suggestion does not work with angularjs 1.6.4, I put a close after the parameter value.