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.

You need to use data-ng-click="menu.mode()", but the mode property should point to a function. In your case i see it as a string variable. — Chandermani
– Chandermani, Commented May 7, 2014 at 4:20

BenMorel · Accepted Answer · 2014-06-23 15:10:23Z

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

edited Jun 23, 2014 at 15:10

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered May 7, 2014 at 4:21

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

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

Comments

suneetha · Accepted Answer · 2014-05-07 04:49:16Z

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/

Collectives™ on Stack Overflow

Passing functions via array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related