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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
jQuery 对象中的类数组操作
Apr 27 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
js实现开启密码大写提示
Dec 21 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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
PHP的几个常用数字判断函数代码
2012/04/24 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python转换摩斯密码示例
2014/02/16 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
python邮件发送smtplib使用详解
2020/06/16 Python
实用自动化运维Python脚本分享
2018/06/04 Python
python全栈知识点总结
2019/07/01 Python
Python 变量的创建过程详解
2019/09/02 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
TCP/IP的分层模型
2013/10/27 面试题
工程采购员岗位职责
2014/03/09 职场文书
主题班会演讲稿
2014/05/22 职场文书
关于工作经历的证明书
2014/10/11 职场文书
保送生自荐信
2015/03/06 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript