AngularJS入门(10)-Angular事件
发布时间：2020-12-17 09:49:27 所属栏目：安全 来源：网络整理
导读：这一篇博客为大家介绍一下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( "My
|
这一篇博客为大家介绍一下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",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",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",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",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",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",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",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",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",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",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",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",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",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",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",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>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |