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 数值项目的格式化函数代码
May 14 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
vue.js+element 默认提示中英文操作
Nov 11 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
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
python中定义结构体的方法
2013/03/04 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python对execl 处理操作代码
2020/06/22 Python
python数据类型强制转换实例详解
2020/06/22 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
介绍一下EJB的体系结构
2012/08/01 面试题
高中毕业生的个人自我评价
2014/02/21 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
文明倡议书
2015/01/19 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电