Angular使用操作事件指令ng-click传多个参数示例

本文实例讲述了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>

运行效果如下：

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • Angularjs为ng-click事件传递参数
  • angular ng-click防止重复提交实例
  • AngularJS基础 ng-click 指令示例代码
  • AngularJS的ng-click传参的方法
  • 详解angularJS动态生成的页面中ng-click无效解决办法
  • Angularjs 动态添加指令并绑定事件的方法
  • AngularJS中directive指令使用之事件绑定与指令交互用法示例
  • Angularjs中使用指令绑定点击事件的方法
  • AngularJs ng-change事件/指令的用法小结
  • Angularjs 事件指令详细整理
赞 (0)

相关推荐

  • 详解angularJS动态生成的页面中ng-click无效解决办法

    今天碰到了一个这样的需求,在自己写的动态的页面中,写入的AngularJS无效不能点击响应事件,以下给出代码以及解决方案 1.首先将我们要赋值给页面的数据new一下 var html = "<a href='javascript:void(0);' ng-click='test()'></a>" 2.用$compile函数编译一下上边的内容 var $html = $compile(html)($scope); 3.将编译好的内容插入到页面中 $("b

  • AngularJS中directive指令使用之事件绑定与指令交互用法示例

    本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法.分享给大家供大家参考,具体如下: AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="Shield

  • Angularjs为ng-click事件传递参数

    Angularjs为ng-click事件传递参数

    在angularjs开发中,我们需要为ng-click事件传递一个参数. 在js中,可以接到参数: 演示:

  • Angularjs 事件指令详细整理

    Angularjs 事件指令详细整理 ngClick 适用标签:所有 触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me</button> </div> #script angular.m

  • Angularjs中使用指令绑定点击事件的方法

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> <li class=""> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external n

  • AngularJS的ng-click传参的方法

    AngularJS的ng-click传参的方法

    今天遇到个难题就是ng-click传参问题,在网上找了好多资料,先留个笔记 <ul id="dataSet" ng-repeat="item in infos" ng-model="dataSet"> <li ng-click="sentOutQuery('{{item.detailId}}')" > <div class="voucherLeft"> <p cla

  • Angularjs 动态添加指令并绑定事件的方法

    这两天学习了angularjs 感觉指令这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: var count=0; $("#test").on("click",function(event){ if(event.target.tagName.toLowerCase()=="input") return; count++; var html="&

  • AngularJS基础 ng-click 指令示例代码

    AngularJS ng-click 指令 AngularJS 实例 按钮每次点击时,计数变量 count 自动加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> &l

  • angular ng-click防止重复提交实例

    方法一:点击后,让button的状态变为disable js指令: .directive('clickAndDisable', function() { return { scope: { clickAndDisable: '&' }, link: function(scope, iElement, iAttrs) { iElement.bind('click', function() { iElement.prop('disabled',true); scope.clickAndDisable

  • AngularJs ng-change事件/指令的用法小结

    本文介绍了AngularJs ng-change事件/指令的小结,分享给大家,也给自己留个笔记 定义和用法 ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作. ng-change 指令需要搭配 ng-model 指令使用. AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行. ng-change 事件在值的每次改变时触发,它不需要

随机推荐