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 相关文章推荐
javascript下function声明一些小结
Dec 28 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
php程序内部post数据的方法
2015/03/31 PHP
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python中import机制详解
2017/11/14 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
Shell如何接收变量输入
2016/08/06 面试题
中科软测试工程师面试题
2012/06/16 面试题
教师节演讲稿
2014/05/06 职场文书
支部书记四风对照材料
2014/08/28 职场文书
婚庆司仪开场白
2015/05/29 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
python游戏开发Pygame框架
2022/04/22 Python