Passing functions via array

Question

I am new to angular js and still working on things. I would like to ask if it's possible to initiate ng-click variables (which are functions.) in angular js? Here is as snippet of my code

<div data-ng-controller="DeathRayController">
    <button data-ng-click="toggleMenu()">Toggle Menu</button>
    <ul ng-show="menuState.show">
        <li data-ng-repeat="menu in menuList"><a href="" data-ng-click="menu.mode">{{ menu.value }}</a></li>
    </ul>
</div>

and here is my controller using angularjs:

var showHide = angular.module('showHide', []);

showHide.controller('DeathRayController', function ($scope) {
// the idea is to display this on the <a ng-click="menu.mode">
    $scope.menuList = [
        { mode: 'stun()', value : 'Stun' },
        { mode: 'disinegrate()' ,value : 'Disinegrate' },
        { mode: 'erase()', value : 'Erase' },
    ];
    $scope.menuState = { show: false };
    $scope.toggleMenu = function() {
        $scope.menuState.show = !$scope.menuState.show;
    };
    $scope.stun = function() {
        alert('Snorlax is stunned!');
    };
    $scope.disinegrate = function() {
        alert('Charizard used Disinegrate!');
    };
    $scope.erase = function() {
        alert('erased Sleep skill');
    };
});

If it's still unclear please do tell me.

Answer 1

In your controller, when you define your menuList array, do not set mode to a string, but instead to the actual function

$scope.menuList = [
    { mode: $scope.stun, value : 'Stun' },
    { mode: $scope.disinegrate ,value : 'Disinegrate' },
    { mode: $scope.erase, value : 'Erase' },
];

Then in your markup:

data-ng-click="menu.mode()"

here is a link to working code

Answer 2

Define functions before assigning them to object.Assign them as

$scope.menuList = [
    { mode: $scope.stun, value : 'Stun' },
    { mode: $scope.disinegrate ,value : 'Disinegrate' },
    { mode: $scope.erase, value : 'Erase' },
]; 

and use them in html as

<ul>  
 <li data-ng-repeat="menu in menuList"><a href="" data-ng-click="menu.mode()">{{ menu.value }}</a></li>
</ul>

View:

<div data-ng-controller="DeathRayController">
  <button data-ng-click="toggleMenu()">Toggle Menu</button>
  <ul ng-show="menuState.show">
    <li data-ng-repeat="menu in menuList"><a href="" data-ng-click="menu.mode()">{{ menu.value }}</a></li>
  </ul>
</div>

controller:

var showHide = angular.module('showHide', []);

showHide.controller('DeathRayController', function ($scope) {
// the idea is to display this on the <a ng-click="menu.mode()">
$scope.stun = function() {
    alert('Snorlax is stunned!');
};
$scope.disinegrate = function() {
    alert('Charizard used Disinegrate!');
};
$scope.erase = function() {
    alert('erased Sleep skill');
};
$scope.menuList = [
    { mode: $scope.stun, value : 'Stun' },
    { mode: $scope.disinegrate ,value : 'Disinegrate' },
    { mode: $scope.erase, value : 'Erase' },
];
$scope.menuState = { show: false };
$scope.toggleMenu = function() {
    $scope.menuState.show = !$scope.menuState.show;
};    

});

Fiddle: http://jsfiddle.net/rVCV2/1/