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 相关文章推荐
遍历jquery对象的代码分享
Nov 02 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 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中使用PDF文档功能
2006/10/09 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
python浪漫表白源码
2019/04/05 Python
python求最大值最小值方法总结
2019/06/25 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
大整数数相乘的问题
2012/07/22 面试题
九年级体育教学反思
2014/01/23 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
学校招生宣传广告词
2014/03/19 职场文书
先进工作者个人总结
2015/02/15 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL