Search code examples
arraysangularjsfunctionangularjs-ng-repeatangularjs-ng-click

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


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>


Solution

  • 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>