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
Angular ng-repeat pass parameter to href link
提问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-href和ng-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 处理此请求的方式应该可行。