AngularJS 事件
来源:互联网 发布:mac虚拟机iso镜像文件 编辑:程序博客网 时间:2024/05/22 01:29
这一篇博客为大家介绍一下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 0
- AngularJS 事件
- AngularJS 事件
- AngularJS 事件
- AngularJS事件
- AngularJS 事件
- AngularJS 事件
- AngularJS 事件
- AngularJS 事件
- angularJS 事件
- angularJS事件
- AngularJS事件
- angularjs-watch 监视事件
- angularjs 失去焦点事件
- angularjs事件指令
- AngularJs 失去焦点事件
- AngularJs事件绑定例子
- AngularJS 全选框事件~
- Angularjs 阻止默认事件
- 我的第二次上机作业项目四
- Vim简明教程
- 欧拉角
- Bootstrap multiselect多选联动的实现
- iOS开发-单元测试
- AngularJS 事件
- uva 12538
- OC阅读笔记五:异常机制
- maven中snapshot快照库和release发布库的区别和作用
- validata基本使用
- UnityNGUI序列帧动画代码
- 我的第一款管理软件——————拥有界面的服务器
- ES5规范之Object增强
- python 中文乱码问题深入分析