在Angular JS中为ng-click添加参数

时间:2017-01-27 09:09:14

标签: javascript angularjs angularjs-ng-click

我的代码是这样的

HTML视图

<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();
     }
 }]);

当我使用一个参数user_id时,它运行正常,参数被正确传递给请求。在我添加了第二个参数名称之后,它没有在params中传递。

4 个答案:

答案 0 :(得分:2)

安德鲁不是你$scope的变量。

因此,当您执行get_user_detail(Andrew)时,Andrew的值未定义

我想您希望将其作为静态值(字符串)传递,将您的值放在引号' '之间:

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

答案 1 :(得分:2)

与其他答案一样,只要您将" "添加到要作为参数传递的字符串中,您的代码就可以正常工作。

&#13;
&#13;
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();
   }
 }]); 
&#13;
<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>
&#13;
&#13;
&#13;

由于显而易见的原因,我对$http电话进行了评论。希望它有所帮助。

答案 2 :(得分:0)

你必须在'':

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

并在js代码中 - name 放入''

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

答案 3 :(得分:0)

我认为你没有在控制器中定义变量,用$ 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>

控制器代码

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();
     }
 }]);

其他解决方案,您可以直接传递字符串而无需定义变量

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

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