I have the following controller:

app.controller('TestController', function($scope) {
  $scope.tests = [{
      name: 'Name 1',
      description: 'Some Description',
      actionHandler: function() {
        alert('Action Handler called');
      }
    },
    ...
  ];
});

In my htmlfile I do an ng-repeat like this:

<div ng-repeat="test in tests">
  <p>{{test.name}}</p>
  <p>{{test.description}}</p>
  <a ng-click="{{test.actionHandler}}">Click me</a>
</div>

It is not really working. I also tried.

<a ng-click="test.actionHandler">Click me</a>

And

 <a ng-click="test.actionHandler()">Click me</a>

But none seem to work. Any idea how I can call a function of an object inside ng-repeat?

Thanks, xCoder.

I have the following controller:

app.controller('TestController', function($scope) {
  $scope.tests = [{
      name: 'Name 1',
      description: 'Some Description',
      actionHandler: function() {
        alert('Action Handler called');
      }
    },
    ...
  ];
});

In my htmlfile I do an ng-repeat like this:

<div ng-repeat="test in tests">
  <p>{{test.name}}</p>
  <p>{{test.description}}</p>
  <a ng-click="{{test.actionHandler}}">Click me</a>
</div>

It is not really working. I also tried.

<a ng-click="test.actionHandler">Click me</a>

And

 <a ng-click="test.actionHandler()">Click me</a>

But none seem to work. Any idea how I can call a function of an object inside ng-repeat?

Thanks, xCoder.

• javascript
• angularjs

Share Improve this question Follow edited Nov 17, 2017 at 4:14 Danny Fardy Jhonston Bermúdez 5,57155 gold badges2626 silver badges3838 bronze badges asked Oct 7, 2015 at 14:37 Janosch HübnerJanosch Hübner 1,69411 gold badge2828 silver badges4949 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Your third stab is the correct form test.actionHandler(). Perhaps you could try including $window along side $scope in your controller 'TestContorller', function($scope, $window) and change the alert call to $window.alert('action handler called') ...

Just remove the {{}} and invoke the function within ng-click

<a ng-click="test.actionHandler()">Click me</a>

DEMO

If I were you, I will do it like this

For html:

<div ng-repeat="test in tests">
   <p ng-bind="test.name"></p>
   <p ng-bind="test.description"></p>
   <a ng-click="test.actionHandler($index)">Click me</a>
</div>

For Controller

app.controller('TestController',function($scope) {
   $scope.tests = [
      {
         name: 'Name 1',
         description: 'Some Description',
      },
   ];

   scope.actionHandler = function(index) 
   {
      alert('Action Handler called for'+$scope.tests[index]['name']);
   }

});

Use ng-bind instead of the curly braces. That is my tip to you.

I would create a new event handler in the controller:

app.controller('TestController',function($scope) {

   $scope.handleClick = function(){
       alert('Action Handler called');   
   }

});

And then your link would be:

<a ng-click="handleClick()">Click me</a>

If you need a handler for a specific test then just pass an id (for example) to the handler.

Only remove the curly braces and add parentheses ().

ng-click="test.actionHandler()"

Something like this:

(function() {
  angular.module("myApp", []).controller("Controller", ["$scope",
    function($scope) {
      $scope.tests = [{
        name: "Name 1",
        description: "Some Description...",
        actionHandler: function() {
          alert("Action Handler called");
          console.log(this);
        }
      }, {
        name: "Name 2",
        description: "Some Description 2...",
        actionHandler: function() {
          alert("Action Handler called");
          console.log(this);
        }
      }];
    }
  ]);
})();

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div data-ng-app="myApp">
  <div data-ng-controller="Controller">
    <ul>
      <li data-ng-repeat="test in tests">{{test.name}}
        <br />
        <button data-ng-click="test.actionHandler()" type="button">Test</button>
      </li>
    </ul>
  </div>
</div>

Live demo