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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
Jquery 基础学习笔记
May 29 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
PHP7 标准库修改
2021/03/09 PHP
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
js实现导航跟随效果
2018/11/17 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
python操作xml文件详细介绍
2014/06/09 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
旅游项目开发策划书
2014/01/18 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
网络书店创业计划书
2014/02/07 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
MySQL创建管理子分区
2022/04/13 MySQL