前面的文章说道了click事件，与其类似的mouseover以及mousemove等等。下面看看selected、change、copy等运用在表单的事件吧。
selected
<div ng-controller="Aaa"> <input type="checkbox" ng-model="aaa" value="{{aaa}}"> <select> <option>11111</option> <option ng-selected="aaa">22222</option> <option>33333</option> </select> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){}]); </script>
如果我们希望一个select选中指定的option，只需要设置该option为selected="selected"，现在为第二个绑定一个变量aaa，对应了一个单选框的ng-model，但单选框选中时aaa为true，取消选中时为false，这样就能设置option的selected了。
change
<div ng-controller="Aaa"> <input type="text" ng-change="bbb='hello'" ng-model="bbb"> <p>{{bbb}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){}]); </script>
当输入框的内容发现改变的时候，让bbb变量设为'hello'。
copy
<div ng-controller="Aaa">
<input type="text" value="xiecg" ng-copy="ccc='hello'">
<p>{{ccc}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){}]);
</script>
当我们粘贴内容到输入框的时候，ccc的值变成'hello'。
除此之外，还有cut(剪切)、paste(粘贴事件)。
下面看个具体的表单验证的例子：
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input相关指令详解</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script> <style type="text/css"> .username .ng-valid{background-color:lightgreen;} .username .ng-invalid{background-color:lightcoral;} .username .ng-pristine{background-color:#fafafa;} /* .username .ng-dirty{} .username .ng-invalid-required{} .username .ng-invalid-minlength{} .username .ng-valid-max-length{} */ </style> </head> <body> <div ng-controller="Aaa"> <div> <form role="form" ng-submit="submitForm(myForm.$valid,user)" novalidate> <div> <div> <label for="name">用户名</label> </div> <div> <input type="text" required ng-pattern="/^[a-zA-Z]{0,6}$/" ng-model='user.name' /> <span ng-show="myForm.name.$dirty && myForm.name.$valid"></span> <span ng-show="myForm.name.$dirty && myForm.name.$invalid"></span> </div> </div> <div> <div> <label for="url">URL</label> </div> <div> <input type="url" ng-model="user.url" /> <span ng-show="myForm.url.$dirty && myForm.url.$valid"></span> </div> </div> <div> <input ng-disabled="myForm.$invalid" type="submit" value="提交" /> </div> </form> </div> <div> <p> 用户名:{{user.name}} 没修改：{{myForm.name.$pristine }} 修改过：{{myForm.name.$dirty}} 验证失败：{{myForm.name.$invalid}} 验证成功：{{myForm.name.$valid}} required：{{myForm.name.$error.required}} </p> <p> URL:{{user.url}} 没修改：{{myForm.url.$pristine }} 修改过：{{myForm.url.$dirty}} 验证失败：{{myForm.url.$invalid}} 验证成功：{{myForm.url.$valid}} 错误详情：{{myForm.url.$error}} </p> </div> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope','$interval',function($scope,$interval){ $scope.submitForm = function(isValid,data) { //验证表单是否可是提交 if (isValid) { console.log(data); }else{ console.log('验证失败'); } }; }]); </script> </body> </html>
首先看看表单部分，使用了novalidate属性禁用了表单默认验证行为，并绑定了ng-submit绑定了submitForm方法。
在用户名的input上设置了required，表示不能为空。ng-pattern是自定义的正则表达式。ng-model是数据(用户填写的数据)。
URL的input也是类似的设置。
看一下在form绑定的submitForm函数，传递了两个参数，myForm.$valid以及user。
myForm是form的name，代表整个表单，myForm.$valid是个布尔值，表示整个表单的元素是否通过验证，user是用户填写的数据，用于提交数据。我们都可以通过controller得到这些信息，然後提交给後端。
myForm代表整个表单，给input附上name值，就可以得到input的验证信息，我们以用户名的input为例。