Angular ng-click error

Question

<li role="menuitem"><a href="#" ng-click='getData1()'>Day</a></li>
<li role="menuitem"><a href="#" ng-click='getWData2()'>Week</a></li>
<li role="menuitem"><a href="#" ng-click='getMData3()'>Month</a></li>

I have these three HTML elements defined and on click I would like to call a function in Angular. The problem is I defined three functions in angular that do the same thing but use a different parameter. How can I pass a fixed parameter into this function to pass in the string therefore helping me create one reusable function called getData():

<li role="menuitem"><a href="#" ng-click='getData('Day')'>Day</a></li>
<li role="menuitem"><a href="#" ng-click='getData('Week')'>Week</a></li>
<li role="menuitem"><a href="#" ng-click='getData('Month')'>Month</a></li>

Here is the function:

$scope.getDayData = function(day){
$scope.currentInterval = "day";

$http.get("http://localhost:8080/" + day)
.then(function(response) {


    });

I get this error when I pass in string: angular.js:13424 Error: [$parse:ueoe] Unexpected end of expression: getDayData( — shapiro
– shapiro, Commented Apr 13, 2016 at 5:09
Just pass $event as argument and get the data using e.target.textContent — Rayon
– Rayon, Commented Apr 13, 2016 at 5:30

singhakash · Accepted Answer · 2016-04-13 05:10:26Z

Change your ng-click to

<li role="menuitem"><a href="#" ng-click="getData('Day')">Day</a></li>
<li role="menuitem"><a href="#" ng-click="getData('Week')">Week</a></li>
<li role="menuitem"><a href="#" ng-click="getData('Month')">Month</a></li>

because of single inverted comma ' you have the unexpected character error.

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
  <script data-require="[email protected]" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
  
    <li role="menuitem"><a href="#" ng-click="getData('Day')">Day</a></li>
<li role="menuitem"><a href="#" ng-click="getData('Week')">Week</a></li>
<li role="menuitem"><a href="#" ng-click="getData('Month')">Month</a></li>
    <script>
    //module declaration
    var app = angular.module('myApp', []);
    //controller declaration
    app.controller('myCtrl',function($scope){
       
        
  $scope.getData = function(data) {

   console.log(data);
  }

    });
    </script> 
</body> 

</html>

Shashank Agrawal · Accepted Answer · 2016-04-13 05:09:53Z

0

You should use double quotes for attributes since you are using single quote for passing the parameter:

<li role="menuitem"><a href="#" ng-click="getData('Day')">Day</a></li>
<li role="menuitem"><a href="#" ng-click="getData('Week')">Week</a></li>
<li role="menuitem"><a href="#" ng-click="getData('Month')">Month</a></li>

This may not work on some browsers. Rest of it looks good.

answered Apr 13, 2016 at 5:09

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

1 Comment

shapiro Over a year ago

yup the single quotes were the problem. I'll accept this since it was answered first

Collectives™ on Stack Overflow

Angular ng-click error

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related