AngularJS ng-click dynamic inside of ng-repeat

Question

I would like to load functions dynamically using my ng-repeat. I thought the below code would work but for some reason it is not working. Could someone please help me get the add() and subtract() functions to reference correctly.

Weird this is, when you inspect the HTML, then the functions where inserted correctly, but in the console Angular throws a weird error that I don't understand.

Note: this is just a demo, I need to use this solution at a different place.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">

<div ng-controller="myCtrl">
  <p>Click the button to run a function:</p>
  <button ng-repeat="x in options" ng-click="{{x.function}}">{{x.text}}</button>
  <p>The button has been clicked {{count}} times.</p>
</div>

<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.count = 0;
    $scope.options = [
      { function: 'add()', text: 'Add'},
      { function: 'subtract()', text: 'Subtract'}
    ];
    $scope.add = function() {
      $scope.count++;
    };
    $scope.subtract = function() {
      $scope.count--;
    };
  }]);
</script>
</body>
</html>

FarukT · Accepted Answer · 2020-04-29 10:23:48Z

1

You did 2 things wrong.

The order of your code should be correct. (only for this plunker otherwise gives a compiling error) The functions should be created first, and then reference to those functions should be defined after that.
When you reference a function, remember to include $scope if it is a scoped function (eg. $scope.add). If it is not a scoped function, then just the function name is enough (eg. add).

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp">

<div ng-controller="myCtrl">
    <p>Click the button to run a function:</p>
    <button ng-repeat="x in options" ng-click="x.function()">{{x.text}}</button>
    <p>The button has been clicked {{count}} times.</p>
</div>

<script>
    angular.module('myApp', [])
        .controller('myCtrl', ['$scope', function ($scope) {
            $scope.add = function () {
                $scope.count++;
            };
            $scope.subtract = function () {
                $scope.count--;
            };
            $scope.count = 0;
            $scope.options = [{
                    function: $scope.add,
                    text: 'Add'
                },
                {
                    function: $scope.subtract,
                    text: 'Subtract'
                }
            ];
        }]);
</script>
</body>

</html>

edited Apr 29, 2020 at 10:23

answered Apr 29, 2020 at 10:05

FarukT

1,66814 silver badges26 bronze badges

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

3 Comments

FarukT Over a year ago

in ng-click it is not necessary to insert {{function}} because ng-click is angular's scope that knows that will called a function

Frank Over a year ago

Your point 1 doesn't matter hey, move your functions above the definitions and the code will still work. So I don't think point 1 is necessary :)

FarukT Over a year ago

you are right, but in this example on the plunker gave me error where the order of functions were different. probably depens from compiler

Collectives™ on Stack Overflow

AngularJS ng-click dynamic inside of ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related