AngularJS 事件
2016-03-28 22:09
666 查看
这一篇博客为大家介绍一下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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery中的常用事件总结
- C#实现WinForm捕获最小化事件的方法
- c#事件使用示例详解
- C#中的事件介绍
- C#实现自定义双击事件
- extjs 为某个事件设置拦截器
- jQuery阻止同类型事件小结
- jQuery bind事件使用详解
- jQuery支持添加事件的日历特效代码分享（3种样式）
- C#中委托和事件的区别实例解析
- SQLSERVER中得到执行计划的两种方式
- C#中事件的动态调用实现方法
- ASP.NET中实现定制自己的委托和事件参数类
- C#处理Paint事件的方法
- javascript下利用for( in )语句 获得所有事件名称的代码
- 关于JavaScript与HTML的交互事件
- jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
- JavaScript 学习笔记（十六） js事件
- JQuery实现表格动态增加行并对新行添加事件
- WinForm实现移除控件某个事件的方法