CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
frankenstein
frankenstein

Reputation: 53

angular ng-click inside ng-repeat

I have a problem to bind the ng-click directive with a method inside my controller. I have tried to put curly brackets inside ng-click, but with a syntax error. The same behavior occurs if I put ng-click="{{action.method}}".

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script data-require="[email protected]" data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="Controller">
  <ul ng-repeat="action in actions">
    <li ng-click={{action.method}}>{{action.name}}</li>
  </ul>
</body>
</html>

controller.js

var app = angular.module('app',[])

app.controller('Controller',['$scope',function ($scope) 
{
  $scope.actions = [
    {
      name : 'add Folder',
      method : 'addFolder()'
    }  
  ]

  $scope.addFolder = function(){
    alert('addFolder')
  }
}])

Any suggestions?

Upvotes: 2

Views: 8534

Answers (1)

Minko Gechev
Minko Gechev

Reputation: 25682

You should use:

  <ul>
    <li ng-repeat="action in actions" ng-click="action.method()">{{action.name}}</li>
  </ul>

instead.

Here is a demo: http://jsbin.com/cuye/2/edit

Note that ng-click accepts expression, not only function so you need to call it: action.method().

Upvotes: 2

Related Questions