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中的call实现继承
Jan 22 Javascript
JavaScript中的History历史对象
Jan 16 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
js中对象和面向对象与Json介绍
Jan 21 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
Vue数据绑定实例写法
Aug 06 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
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
express express-session的使用小结
2018/12/12 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
Python实现TCP通信的示例代码
2019/09/09 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
校园报刊亭的创业计划书
2014/01/02 职场文书
证婚人经典证婚词
2014/01/09 职场文书
副总经理任命书
2014/06/05 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
小学生表扬稿范文
2015/05/05 职场文书
酒店员工管理制度
2015/08/05 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS