本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>

<html ng-app="myApp">

<head>

  <meta charset="UTF-8">

  <title>www.jb51.net 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传多个参数示例的更多相关文章

  1. Angular——事件指令

    基本介绍 angular的事件指令都是ng-click,ng-blur....的形式,类似于js的事件 基本使用 <!DOCTYPE html> <html lang="e ...

  2. Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  3. 第一章、VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  4. VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  5. Vue框架:挂载点-过滤器-事件指令-表单指令

    近期学习安排 1.Vue框架 前台html+css+js框架,是不同于js与JQuery的数据驱动框架, 学习的知识点:指令 |  实例成员 | vue项目 2.drf框架 django的插件,完成前 ...

  6. [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]

    [Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...

  7. angular使用post、get向后台传参的问题

    一.问题的来源 我们都知道向后台传参可以使用get.put,其形式就类似于name=jyy&id=001.但是在ng中我却发现使用$http post进行异步传输的过程中后台是接收不到数据的. ...

  8. AngularJS1.X学习笔记4-内置事件指令及其他

    AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. ...

  9. Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令

    1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

随机推荐

  1. Element + Vue I18n动态import加载国际化语言包翻译文件

    需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...

  2. [Linux]下的StarUML永远使用版

    这是Linux下的StarUML,其实windows下的是一样的 请不要用于商业目的 这是Linux下的StarUML 解压之后,这是一个appImage文件,也就是说,双击直接运行的版本 [Bash ...

  3. kotlin基础 空值检查

    NULL检查机制 Kotlin的空安全设计对于声明可为空的参数,在使用时要进行空判断处理,有两种处理方式,字段后加!!像Java一样抛出空异常,另一种字段后加?可不做处理返回值为 null或配合?:做 ...

  4. cisco 交换机设置时区、时间、同步日志本地时间

    Core-Switch-1#show clockCore-Switch-1#show ntp statusCore-Switch-1#conf tCore-Switch-1(config)# cloc ...

  5. Tensorflow不能使用GPU的解决办法

    转载:https://blog.csdn.net/kudou1994/article/details/86735451 服务器在训练模型,另一边我在瞎胡乱搞不晓得咋个搞的,就不能使用GPU了.pyth ...

  6. linux编译qt

    1.使用QtCreator新建工程,windows和linux都可以,这样才有.pro文件 2.在linux中进入工程目录,生成makefile: /home/5.9.2/gcc_64/bin/qma ...

  7. matlab学习笔记13_3创建函数句柄

    一起来学matlab-matlab学习笔记13函数 13_3 创建函数句柄 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://ww2.mathworks.cn/help ...

  8. 忘记树莓派pi账户密码简单重设

    网上搜到的教程多是要修改cmdline.txt,非常繁琐,其实树莓派本身的root账户还没有启用,在root账户下重设pi的密码是很容易的,下面教你启用root账户,一切都需要在树莓派本机上操作 打开 ...

  9. Windows Server 2008 R2 IIS7.5配置FTP图文教程

    本文为大家分享了IIS 配置FTP 网站的具体过程,供大家参考,具体内容如下 说明:服务器环境是Windows Server 2008 R2,IIS7.5. 1. 在 服务器管理器的Web服务器(II ...

  10. 基于zynq 7020的串口UART中断实验

    1.参考 UG585,P1790[JokerのZYNQ7020]UART学会Zynq(27)UART中断驱动模式示例 2.理论知识 在ZYNQ的中断中有一个IOP的中断集,它包几个外设的中断,其中包含 ...