Adding parameters to ng-click in Angular JS

Question

My code is something like this

HTML view

<div ng-app="myApp" ng-controller="myCtrl"> 
  <button ng-click="get_user_detail(Andrew)"> 
  </button>

  <button ng-click="get_user_detail(Andrew1)"> 
  </button>
</div>

AngularJS

   var app = angular.module("myApp", []);

   app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {
     $scope.get_user_detail=function(name){
         var response = $http.get("myURL", {
            params: {user_id:12345,name:name}
        });
      response.success();
      response.error();
     }
 }]);

While I was working with one parameter user_id,it was working fine,parameters were passed properly to request.After I added 2nd parameter name,it is not getting passed in params.

Answer 1

Andrew is not a variable of your $scope.

So when you do get_user_detail(Andrew), the value of Andrew is undefined.

---

I guess you would like to pass it as a static value (string), put your value between quotes ' ':

<button ng-click="get_user_detail('Andrew')"> 

Answer 2

As in the other answers, your code should work as long as you add " " to the strings you intend to pass as params.

var app = angular.module('ngApp', []);

app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {        
     
  $scope.get_user_detail = function(name){
     $scope.name = name
     // response = $http.get("myURL", {
     //     params: {user_id:12345,name:name}
     // });
     // response.success();
     // response.error();
   }
 }]); 

<div ng-app="ngApp" ng-controller="myCtrl">
  You clicked {{name}} <br/>
  <button ng-click="get_user_detail('Andrew')"> Andrew
  </button>

  <button ng-click="get_user_detail('Bob')"> Bob
  </button>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="app.js"></script>

</div>

I commented the $http call for obvious reasons. Hope it helps.

Answer 3

You must have string in ng-click in ' ':

<button ng-click="get_user_detail('Andrew')"> 

and in js code - name put in ' '

params: {user_id:12345,'name':name}

Answer 4

I thought you not define variables in controller, define variable with $scope

<div ng-app="myApp" ng-controller="myCtrl"> 
  <button ng-click="get_user_detail(Andrew)"> 
  </button>

  <button ng-click="get_user_detail(Andrew1)"> 
  </button>
</div>

Controller Code

var app = angular.module("myApp", []);

   app.controller("myCtrl", ['$compile', '$http', '$scope', function    ($compile, $http, $scope) {
     $scope.Andrew = 'John';
     $scope.Andrew = 'Jam';
     $scope.get_user_detail=function(name){
         var response = $http.get("myURL", {
            params: {user_id:12345,name:name}
        });
      response.success();
      response.error();
     }
 }]);

Other soluation you can direct pass string without define variable

<div ng-app="myApp" ng-controller="myCtrl"> 
  <button ng-click="get_user_detail('Andrew')"> 
  </button>

  <button ng-click="get_user_detail('Andrew1')"> 
  </button>
</div>