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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 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格式输出文件var_export函数实例
2014/11/15 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
PHP echo()函数讲解
2019/02/15 PHP
javascript 解析url的search方法
2010/02/09 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
解析Python中while true的使用
2015/10/13 Python
Python中元组,列表,字典的区别
2017/05/21 Python
python之super的使用小结
2018/08/13 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
Java面试题及答案
2012/09/08 面试题
《广玉兰》教学反思
2014/04/14 职场文书
计划生育工作总结2015
2015/04/03 职场文书