AngularJS的ng-click传参的方法


Posted in Javascript onJune 19, 2017

今天遇到个难题就是ng-click传参问题,在网上找了好多资料,先留个笔记

<ul id="dataSet" ng-repeat="item in infos" ng-model="dataSet">
  <li ng-click="sentOutQuery('{{item.detailId}}')" >
    <div class="voucherLeft">
      <p class="p1">{{item.transAmount}}</p>
      <p class="p2">已分配:<span >{{item.usePoints}}</span></p>
    </div>
    <div class="voucherRight">
      <p class="p3">授信方:<span>{{item.rollOutAccountName}}</span></p>
      <p class="p4">授信日期:<span>{{item.createTime}}</span></p>
    </div>
  </li>
</ul>
//js代码
$scope.sentOutQuery = function(sourceDetail){
  var expiresDate= new Date();
  expiresDate.setTime(expiresDate.getTime() + 2*1000);
  $cookieStore.put("sourceDetailId", sourceDetail,{expires : expiresDate});
  console.log(sourceDetail); 
  window.location.href='sentOutQuery.html';
}

ng-click="sentOutQuery('{{item.detailId}}')" 这样虽然在页面上debugger能看到传的参数值,但是这样事件点击无效,如下图;

 AngularJS的ng-click传参的方法

只有将点击事件中的参数直接引入才能在对应的JS代码中获取该参数

AngularJS的ng-click传参的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
JavaScript队列函数和异步执行详解
Jun 19 #Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 #Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 #Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 #Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 #Javascript
jQuery 实现双击编辑表格功能
Jun 19 #jQuery
Web制作验证码功能实例代码
Jun 19 #Javascript
You might like
摩卡咖啡
2021/03/03 咖啡文化
php与paypal整合方法
2010/11/28 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
eclipse php wamp配置教程
2016/06/30 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
日期 时间js控件
2009/05/07 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python算法表示概念扫盲教程
2017/04/13 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Python如何根据时间序列数据作图
2020/05/12 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
超级实用的8个Python列表技巧
2020/08/24 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
幼儿园教师节活动方案
2014/02/02 职场文书
初中政教处工作总结
2015/08/12 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Python进程间的通信之语法学习
2022/04/11 Python