Angular使用操作事件指令ng-click传多个参数示例


Posted in Javascript onMarch 27, 2018

本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>3water.com angular ng-click用于操作事件的指令</title>
  <script src="angular.min.js"></script>
  <!--
    事件指令:Angular封装的用于操作事件的指令
    通常是ng-[event]来命名指令,如ng-click表示单击事件
    Angular中的事件处理,需要将处理函数挂载到对应控制器的$scope上
  -->
</head>
<body>
  <div ng-controller="myCtrl">
    <button ng-click="fn1()">点击执行</button>
    <button ng-click="fn2($event)">点击执行,附带事件对象$event</button>
    <button ng-click="fn2($event, 'tom')">点击执行,多个参数</button>
  </div>
<script>
  var app = angular.module("myApp", [])
    .controller("myCtrl", ["$scope", function($scope) {
      $scope.fn1 = function() {
        alert("事件执行");
      }
      $scope.fn2 = function(event,name) {
        console.log("事件执行了.", event, name);
      }
    }]);
</script>
</body>
</html>

运行效果如下:

Angular使用操作事件指令ng-click传多个参数示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 #Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 #Javascript
Angular中使用better-scroll插件的方法
Mar 27 #Javascript
使用node打造自己的命令行工具方法教程
Mar 26 #Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 #Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 #Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 #Javascript
You might like
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php实现文件预览功能
2017/05/23 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
详解supervisor使用教程
2017/11/21 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
浅谈Python3中print函数的换行
2020/08/05 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
标准化管理实施方案
2014/02/25 职场文书
会计专业求职信范文
2014/03/16 职场文书
社区活动总结报告
2014/05/05 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
如何写观后感
2015/06/19 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python