AngularJS call function of object in ng-repeat

Question

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.

kasia · Accepted Answer · 2015-10-07 14:50:10Z

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') ...

answered Oct 7, 2015 at 14:50

kasia

1114 bronze badges

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

Comments

charlietfl · Accepted Answer · 2015-10-07 14:51:35Z

1

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

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

DEMO

answered Oct 7, 2015 at 14:51

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

madi · Accepted Answer · 2015-10-07 14:53:38Z

1

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.

answered Oct 7, 2015 at 14:53

madi

5,6625 gold badges40 silver badges48 bronze badges

Comments

James Drummond · Accepted Answer · 2015-10-07 14:49:31Z

0

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.

answered Oct 7, 2015 at 14:49

James Drummond

1257 bronze badges

Comments

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2015-10-07 15:03:45Z

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.com/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

Collectives™ on Stack Overflow

AngularJS call function of object in ng-repeat

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related