AngularJS 事件

简介:

这一篇博客为大家介绍一下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>
目录
相关文章
|
10月前
NPM——删除已发布的包
NPM——删除已发布的包
234 1
|
Android开发
setOnItemClickListener不起作用解决方法
setOnItemClickListener不起作用解决方法
249 2
|
机器学习/深度学习 人工智能 算法
密钥密码学(二)(4)
密钥密码学(二)
254 0
|
搜索推荐 Linux Perl
【专栏】Linux 中有趣的命令:`cowsay` 是 Linux 中一个趣味命令,可在终端创造“会说话的牛”效果
【4月更文挑战第28天】`cowsay` 是 Linux 中一个趣味命令,可在终端创造“会说话的牛”效果。基本用法是输入 `cowsay "text"`,展示带有文字的奶牛形象。使用 `-f` 可换不同牛的样式,`-e` 改变文字颜色。还有 `cowthink` 让牛思考,`cowbell` 添加铃铛声。可与其他命令结合,如 `grep` 或 `sed`,增加终端互动性与趣味性。不论新手还是老手,`cowsay` 都能为你的终端带来更多乐趣和个性化。
296 0
|
Java Linux Shell
Nacos安装指南
`Nacos`安装指南包括Windows和Linux两部分。在Windows上,下载Nacos服务端安装包,解压到非中文目录,修改配置文件(如需)并启动服务。通过`startup.cmd -m standalone`启动,然后在浏览器访问`http://127.0.0.1:8848/nacos`。Linux安装涉及安装JDK,上传Nacos安装包,解压并启动服务,使用`sh startup.sh -m standalone`命令。Nacos作为Spring Cloud Alibaba的依赖,需要在项目中引入相关依赖。
490 1
|
运维 中间件 Java
淘宝权益玩法平台的Serverless化实践
淘宝权益玩法平台的Serverless化实践
424 0
|
数据安全/隐私保护 Python
ansible远程启动程序ansible结束后程序也被关
ansible远程启动程序ansible结束后程序也被关
154 0
|
人工智能 大数据 云栖大会
投票赢卫衣,为爱发电VS绩效晋升你选哪一个?
作为一名开发者,还记得你参与开源项目的初心吗?支撑你参与开源的核心动力是“为爱发电”主动为之,还是被绩效、晋升捆绑束缚的无奈之举?你们的声音需要被聆听!欢迎大家扫码进行投票,投票结果将会在云栖大会开发者舞台——「开源人说」大数据&AI专场进行公布,现场还有更多开源话题的深入探讨!
2024 4
投票赢卫衣,为爱发电VS绩效晋升你选哪一个?
|
人工智能 运维 前端开发
参与即有奖|前端领域主题征文开始啦!
阿里云开发者社区推出“前端技术征文挑战赛”。现面向社区所有开发者征集前端领域技术文章,可以是语言框架的使用技巧,也可以是技术领域的趋势探讨,只要你有干货,那就分享出来!在活动规定时间内前往阿里云开发者社区发文,就有机会获得空气炸锅、社区积分等丰富奖励,参与即可获奖,快来参加吧!
2104 22
参与即有奖|前端领域主题征文开始啦!
|
消息中间件 缓存 NoSQL
Java项目经验二:二手车系统
XX二手车的服务贯穿二手车交易各个环节,运用成熟的互联网技术,以海量、真实的二手车信息为基 础,坚持诚信、公正的准则,通过政策解析、价格评估、担保、置换和保险等服务,建立专业、严谨、使用 便捷的交易体系,推动中国二手车行业的良性发展。
321 0