Adding function dynamical to angular objects

Question

How to add a function to a angular object dynamical to the onclick or click event?

Adding onclick={{item.function}} or ng-click={{item.function}} won't work

JS

angular
  .module('app', [])
  .controller('MainController', ['$scope', function($scope) {
    $scope.test = function() {
      alert(1);
    };
    $scope.items = {
      'item1': {
        name: 'Item1',
        function: 'test()' // Not calling
      }
    };
  }]);

Html

<html ng-app="app">
<body ng-controller="MainController">
  <ul ng-repeat="item in items">
    <li ng-bind="item.name" ng-click="item.function"></li>
  </ul>
</body>
</html>

Not working demo http://codepen.io/anon/pen/jqEKRP

Boris Parnikel · Accepted Answer · 2016-03-01 14:26:03Z

2

In controller:

...
      'item1': {
        name: 'Item1',
        f: $scope.test
      }
...

In template:

<li ng-bind="item.name" ng-click="item.f()"></li>

http://codepen.io/bparnikel/pen/bpNjoE

answered Mar 1, 2016 at 14:26

Boris Parnikel

8631 gold badge7 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Adding function dynamical to angular objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related