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 相关文章推荐
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
创建与框架无关的JavaScript插件
Dec 01 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
php5数字型字符串加解密代码
2008/04/24 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python的继承知识点总结
2018/12/10 Python
python可视化实现代码
2019/01/15 Python
python3实现微型的web服务器
2019/09/03 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
药剂学专业应届生自荐信
2013/09/29 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
投标承诺函范文
2015/01/21 职场文书
介绍信范文
2015/01/31 职场文书
千手观音观后感
2015/06/03 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
2016春节放假通知范文
2015/08/18 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
Python提取PDF指定内容并生成新文件
2021/06/09 Python