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 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 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中的数组操作函数整理
2008/08/18 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
Laravel 队列使用的实现
2019/01/08 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python操作csv文件实例详解
2017/07/31 Python
Python封装原理与实现方法详解
2018/08/28 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
培训自我鉴定
2014/01/31 职场文书
老公爱的承诺书
2014/03/31 职场文书
警示教育观后感
2015/06/17 职场文书
主婚人致辞精选
2015/07/28 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android