ng-repeat中对象的AngularJS调用函数

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 html file 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.

Answer 1

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

Answer 2

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

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

DEMO

Answer 3

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.

Answer 4

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.

Answer 5

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