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宝典学习笔记
Feb 07 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
js实现表格数据搜索
Aug 09 Javascript
node.js基础知识汇总
Aug 25 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统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php UBB 解析实现代码
2011/11/27 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
Bootstrap Table从零开始
2017/06/30 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python实现简单的socket server实例
2015/04/29 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
matplotlib绘制动画代码示例
2018/01/02 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
python散点图实例之随机漫步
2018/08/27 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
学雷锋月活动总结
2014/04/25 职场文书
初二物理教学反思
2016/02/19 职场文书
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL