AngularJS 事件

最新推荐文章于 2020-01-18 16:43:16 发布
最新推荐文章于 2020-01-18 16:43:16 发布
阅读量2.6k 收藏 1
点赞数 2
分类专栏： AngularJS 文章标签： angularjs 事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianggujin/article/details/51001757
版权

这一篇博客为大家介绍一下AngularJS为我们提供的事件指令。

ngBlur

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.blur=function(msg){
                    alert(msg);
                };
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-blur="blur('button1 blur')" type="button" value="button1" />
    </body>

</html>

ngChange

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.counter = 0;
                $scope.change = function() {
                    $scope.counter++;
                };
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
        <label for="ng-change-example1">Confirmed</label><br />
        <tt>counter = {{counter}}</tt><br/>
    </body>

</html>

ngClick

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-click="count = count + 1">Increment</button>
        <span>count: {{count}}</span>
    </body>

</html>

ngCopy

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.copied = false;
                $scope.value = 'copy me';
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-copy="copied=true" ng-model="value"> copied: {{copied}}
    </body>

</html>

ngCut

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.cut = false;
                $scope.value = 'cut me';
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-cut="cut=true" ng-model="value"> cut: {{cut}}
    </body>

</html>

ngDblclick

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-dblclick="count = count + 1">
            Increment (on double click)
        </button> count: {{count}}
    </body>

</html>

ngKeydown

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-keydown="count = count + 1">
        key down count: {{count}}
    </body>

</html>

ngKeypress

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-keypress="count = count + 1">
        key press count: {{count}}
    </body>

</html>

ngKeyup

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <p>Typing in the input box below updates the key count</p>
        <input ng-keyup="count = count + 1"> key up count: {{count}}

        <p>Typing in the input box below updates the keycode</p>
        <input ng-keyup="event=$event">
        <p>event keyCode: {{ event.keyCode }}</p>
        <p>event altKey: {{ event.altKey }}</p>
    </body>

</html>

ngMousedown

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mousedown="count = count + 1">
            Increment (on mouse down)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseenter

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseenter="count = count + 1">
            Increment (when mouse enters)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseleave

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseleave="count = count + 1">
            Increment (when mouse leaves)
        </button>
        count: {{count}}
    </body>

</html>

ngMousemove

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mousemove="count = count + 1">
            Increment (when mouse moves)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseover

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseover="count = count + 1">
            Increment (when mouse is over)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseup

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseup="count = count + 1">
            Increment (on mouse up)
        </button>
        count: {{count}}
    </body>

</html>

ngPaste

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.paste = false;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-paste="paste=true" placeholder='paste here'>
        pasted: {{paste}}
    </body>

</html>
蒋固金
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular的事件
归小超博客
03-14 3413
这张图中有两个视图块A和B，它们分别又有两个子视图。这时候，如果子视图A1想要发出一个业务事件，使得B1和B2能够得到通知，过程就会是： 沿着父作用域一路往上到达双方共同的祖先作用域 从祖先作用域一级一级往下进行广播，直到到达需要的地方 简化一下： 对于这种事件的传播方式，举个例子，1班班长想要给2班班长发个通知，他的通知方向是一级一级向上汇报，直到双方共同的老师，然后再沿着路线向下去通知。...
AngularJs 失去焦点事件
timeless的博客
10-21 2万+
body {             padding-top:30px;         }                     var app = angular.module('app', []);         app.controller('Ctrl', function ($scope) {             //array of edited f
AngularJS 事件
书香水墨
04-09 330
1 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件 <div ng-app="" ng-controller="myCtrl"> <button ng-click="count = count + 1">点我！</button> <p>{{ count }}</p> </...
AngularJS常用指令
Kio的博客
11-03 5679
这篇文章主要介绍了整理AngularJS中的一些常用指令、事件和服务，angularjs常用指令：ng-app，ng-repeat，ng-switch，ng-hidden，ng-show，ng-options，na-style，ng-change，angularjs常用服务：$route，$http，$watch，$timeout，$location，angularjs常用事件：ng-click，ng-change，ng-blur
Angular 事件_Angular $event - angular 基础教程 - Angular 教程网
后台模板
02-02 1万+
转载自 http://www.ngui.cc/news/show-113.html 获取鼠标事件 在第三节的示例中，假如我们需要获取鼠标事件，那应该怎么办呢？这时，我们可以引入 $event 变量，具体如下： import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-simple-
AngularJS 事件发布机制
10-18
主要介绍了AngularJS 事件发布机制，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
AngularJS事件日历/计划程序
04-11
**AngularJS事件日历/计划程序** AngularJS是一款由Google维护的前端JavaScript框架，用于构建交互式的单页面应用（SPA）。这个项目是一个基于AngularJS的日/周事件日历和计划程序，它提供了拖放功能，使得用户能够...
Angularjs 事件指令详细整理
10-19
主要介绍了Angularjs 事件指令详细整理的相关资料,这里对AngularJS 的所有的事件指令一一做出详细介绍，需要的朋友可以参考下
AngularJS 事件绑定(ng-click)
houyanhua1的专栏
04-28 8291
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS&lt;/title&gt; &lt;script src="angular.min.js"&g
angularjs中的$event事件
Super_wolve的博客
03-19 3561
angularjs中的$event事件 <thead> <tr> <th class="" style="padding-right:0px"> ...
AngularJs ng-change事件/指令
热门推荐
天马3798
09-17 5万+
定义和用法 ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。 ng-change 指令需要搭配 ng-model 指令使用。 AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。 ng-change 事
angularJs常用事件
weixin_39703839的博客
12-07 271
ui-router禁用缓存 //配置路由 app.config(function ($stateProvider, $urlRouterProvider, $httpProvider) { //禁止缓存 if (!$httpProvider.defaults.headers.get) { $httpProvider.defaults.headers.get = {...
angular监听鼠标,键盘事件
惯性力
07-10 8377
关键词:$event 监听鼠标事件 &lt;button (click)="onClick($event)"&gt;&lt;/button&gt; $event 输出: MouseEvent {isTrusted: true, screenX: 395, screenY: 541, clientX: 284, clientY: 383, …} 监听键...
AngularJs 事件机制
weixin_43294560的博客
01-18 221
AngularJs事件机制 1、ng-无on的事件名='函数名(参数必须是NG变量)',对元素添加事件机制,回调函数需要在控制器脚本中实现 2、控制器脚本中回调函数 $scope.回调函数名=function(形参){ ...}; 代码示例: <html ng-app='app' ng-controller='main'> <head> <meta ch...
AngularJs1学习笔记：AngularJS 输入验证和事件
Chailyn的博客
06-26 1790
一：AngularJs1学习笔记:指令 上篇看完angular的指令现在看一下他的指令和验证。这里的验证的对象是input。 事件ng-click 表示点击事件 绑定点击事件 <button id="butLogin" ng-click="login()">登录</button> $scope.login =function(){ alert("哈哈哈"); }ng
angularJS img 标签 设置点击事件
最新发布
05-30
要为AngularJS中的img标签设置点击事件，可以使用ng-click指令。具体步骤如下： 1. 在img标签上添加ng-click指令，然后将其设置为要调用的控制器方法的名称，如下所示： ``` <img src="path/to/image" alt="Image" ng-click="onImageClick()"> ``` 2. 在控制器中实现该方法，如下所示： ``` angular.module('myApp', []) .controller('myCtrl', function($scope) { $scope.onImageClick = function() { // 处理点击事件的逻辑 }; }); ``` 这样，当用户在img标签上单击时，AngularJS将调用该方法并执行其中的逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值