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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
理解jQuery stop()方法
Nov 21 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 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对XML的操作详解
2013/06/07 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
竞选班委演讲稿
2014/04/28 职场文书
工作保证书范文
2014/04/29 职场文书
环保倡议书格式范文
2014/05/14 职场文书
组织鉴定材料
2014/06/02 职场文书
培训科主任岗位职责
2014/08/08 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
小学信息技术教学反思
2016/02/16 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
选购到合适的激光打印机
2022/04/21 数码科技