javascript Angular ng-repeat 将参数传递给 href 链接

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33222162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 16:13:55  来源:igfitidea点击:

Angular ng-repeat pass parameter to href link

javascriptjqueryajaxangularjsgrails

提问by J21042

I have an existing grails app, built using GSPs and custom tagLibs. I need to incorporate some new code that uses AngularJS. I am new to AngularJS.

我有一个现有的 grails 应用程序,它是使用 GSP 和自定义 tagLibs 构建的。我需要合并一些使用 AngularJS 的新代码。我是 AngularJS 的新手。

Specifically, I have existing links that were generated with custom tags, such as:

具体来说,我有使用自定义标签生成的现有链接,例如:

<g:custonSearchLink id="${ent.id}" >

that evaluate to

评估为

<a href="fullPath/controllerName/method/X", onclick="jQuery.ajax((type:'POST', url:'fullPath/controllerName/method/X', success:function(data,textStatus){jQuery('tableDiv').html(data);}, error:function(...)){}});return false" >...

where X is the id param. I need to have the ng-repeat generate these links, and pass the "X" param value into the href and ajax url paths.

其中 X 是 id 参数。我需要让 ng-repeat 生成这些链接,并将“X”参数值传递到 href 和 ajax url 路径中。

So I understand that I can just use the nested curly braces " {{}}" to pass the X param from the object into the href string,

所以我知道我可以只使用嵌套的花括号“{{}}”将对象中的 X 参数传递到 href 字符串中,

<li ng-repeat="obj in myList track by obj.id" >
  <a href="fullPath/controllerName/method/{{obj.id}}"

but the onclick ajax url is nested in a single quoted string inside the onclick string. How can I pass the "X" param into that? This does not work:

但是 onclick ajax url 嵌套在 onclick 字符串内的单引号字符串中。我怎样才能将“X”参数传递给它?这不起作用:

onclick="jQuery.ajax((type:'POST', url:'fullPath/controllerName/method/{{obj.id}}', 

Note that the "fullPath" in my case is "https://localhost:8453/" since the server that is responding to the AJAX call is running on a different port than the server hosting the GSP.

请注意,在我的例子中,“fullPath”是“ https://localhost:8453/”,因为响应 AJAX 调用的服务器运行在与托管 GSP 的服务器不同的端口上。

采纳答案by Shashi

In this case you can use ng-click

在这种情况下,您可以使用 ng-click

and define a javascript function in your angular controller in the same scope and invoke ajax using $http provider.

并在相同范围的角度控制器中定义一个 javascript 函数,并使用 $http 提供程序调用 ajax。

<a ng-click="invoke(obj.id)" />

$scope.invoke = function(id){
   $http({
          method:'POST', 
          url:fullPath/controllerName/method/id
        });
}

回答by awimley

Using ng-hrefand ng-clickallows you to use AngularJS scope variables in javascript event handlers. Like so:

使用ng-hrefng-click允许您在 javascript 事件处理程序中使用 AngularJS 范围变量。像这样:

<div ng-repeat="someItem in list track by someItem.id">
  <a ng-href="/your/url/to/this/id/{{ someItem.id }}"></a>
  <button ng-click="$scope.someAction(someItem.id)"></button>
</div>

So your specific click event handler would be:

因此,您的特定点击事件处理程序将是:

ng-click="jQuery.ajax((type:'POST', url:'fullPath/controllerName/method/{{obj.id}}'"

As mentioned by Shashi, you can fire the HTTP request in a scope function, though the way you are currently handling this with inline AJAX should work.

正如 Shashi 所提到的,您可以在作用域函数中触发 HTTP 请求,尽管您当前使用内联 AJAX 处理此请求的方式应该可行。