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 基础问答三
Dec 03 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
JS实现可针对算术表达式求值的计算器功能示例
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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
员工评语大全
2014/01/19 职场文书
总经理司机职责
2014/02/02 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
会议营销主持词
2015/07/03 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js