Is it possible to store AngularJS functions in arrays and put the functions in ng-click?

Question

I was trying to make a few buttons using Array. The buttons displayed, but the function from the array is not working.

var module = angular.module('app',[]);
module.controller('Ctrl',['$scope', function ($scope){
  $scope.data = [
  {link: "myNav.pushPage('page1')", btn:'Page 1'},
  {link: "myNav.pushPage('page2')", btn:'Page 2'},
  {link: "myNav.pushPage('page3')", btn:'Page 3'}
  ]
}])

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <tr ng-repeat="x in data">
    <td><button ng-click="{{x.link}}">{{x.btn}}</button></td>
  </tr>
</div>

ng-click accepts expressions, so you don't need the interpolation syntax (i.e. {{ ... }}). Instead you can use $eval as part of the expression: ng-click="$eval(x.link)". — miqh
– miqh, Commented Sep 27, 2019 at 2:45
Mixing interpolation ({{ }}) with AngularJS expressions is bad practice. — georgeawg
– georgeawg, Commented Sep 27, 2019 at 2:46

siva kumar · Accepted Answer · 2019-10-03 12:54:40Z

0

var module = angular.module('app',[]);
module.controller('Ctrl',['$scope', function ($scope){
    $scope.data = [
      {link: "page1", btn:'Page 1'},
      {link: "page2", btn:'Page 2'},
      {link: "page3", btn:'Page 3'}
    ]
    $scope.navigate(link){
    //$state.go(link) //navigate page
}

}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <tr ng-repeat="x in data">
    <td><button ng-click="navigate(x.link)">{{x.btn}}</button></td>
  </tr>
</div>

edited Oct 3, 2019 at 12:54

answered Sep 27, 2019 at 13:58

siva kumar

5771 gold badge3 silver badges13 bronze badges

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

Comments

Bill P · Accepted Answer · 2019-09-27 11:02:08Z

0

If the function is always the same and only the parameter changes, you can have the parameter in data array and pass it like this:

<table>
    <tr ng-repeat="x in data">
        <td><button ng-click="test(x.link)">{{x.btn}}</button></td>
    </tr>
</table>

With this array:

$scope.data = [{
  link: "page1",
  btn: 'Page 1'
},
{
  link: "page2",
  btn: 'Page 2'
},
{
  link: "page3",
  btn: 'Page 3'
}]

Check a working demo: DEMO

answered Sep 27, 2019 at 11:02

Bill P

3,61610 gold badges24 silver badges34 bronze badges

1 Comment

Naufal Over a year ago

Thank Dude, I got it

Collectives™ on Stack Overflow

Is it possible to store AngularJS functions in arrays and put the functions in ng-click?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related