Assuming I have the following:
<button ng-repeat="{{item in items}}" ng-click="{{item.name}}Function()">{{item.name}}</button>
I need to be able to get the ng-click to dynamically change based on the item.name such as
firstItemFunction()
secondItemFunction()
etc.
If $scope has references to the functions:
$scope.items =
[
{ name: 'firstItemFunction' },
{ name: 'secondItemFunction' }
];
$scope.firstItemFunction = function () {
console.log('firstItemFunction');
};
$scope.secondItemFunction = function () {
console.log('secondItemFunction');
};
HTML:
<button ng-repeat="item in items" ng-click="this[item.name]()">
{{item.name}}
</button>
Demo: http://plnkr.co/edit/FSrGumlZqm4Rdku6I3X5?p=preview
Alternatively:
$scope.items = [{
name: 'firstItemFunction'
}, {
name: 'secondItemFunction'
}];
$scope.firstItemFunction = function() {
console.log('firstItemFunction');
}
$scope.secondItemFunction = function() {
console.log('secondItemFunction');
}
$scope.execute = function(action) {
$scope[action]();
};
And:
<button ng-repeat="item in items" ng-click="execute(item.name)">
{{item.name}}
</button>
Demo: http://plnkr.co/edit/6jATpgEAvFgTFXbvQ6IE?p=preview
If the functions are defined globally use HTML from above, inject $window and:
$scope.items = [{
name: 'firstItemFunction'
}, {
name: 'secondItemFunction'
}];
$scope.execute = function(action) {
$window[action]();
};
I would move the logic for determining which function to call to your javascript.
html
<button ng-repeat="{{item in items}}" ng-click="figureOutFunction(item)">{{item.name}}</button>
javascript
$scope.figureOutFunction(item){
if(item.name == "firstItem"){
firstItemFunction();
}
else if(item.name == "secondItem"){
secondItemFunction();
}
};
edit
If you want to avoid the switch, you can do it this way:
html
<button ng-repeat="{{item in items}}" ng-click="item.action()">{{item.name}}</button>
javascript
var firstItemFunction = function(){
...
};
var secondItemFunction = function(){
...
};
$scope.items = [{
name: 'firstItem',
action: firstItemFunction
}, {
name: 'secondItem',
action: secondItemFunction
}];
I would avoid creating unnecessary functions that call others.
