<!doctype html> <html ng-app="MyApp"> <head> <script src="https://www.jb51.net/js/angular.min.js"></script> </head> <body> <div ng-controller="Controller"> <form novalidate> Name: <input type="text" ng-model="user.name" required /><br/> E-mail: <input type="email" ng-model="user.email" required /><br/> <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid"> Invalid: <span ng-show="form.uEmail.$error.required">Tell us your email.</span> <span ng-show="form.uEmail.$error.email">This is not a valid email.</span> </div> Gender:<br/> <input type="radio" ng-model="user.gender" value="male" /> male <input type="radio" ng-model="user.gender" value="female" /> female<br/> <input type="checkbox" ng-model="user.agree" required /> I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required /> <div ng-show="!user.agree || !user.agreeSign"> Please agree and sign. </div> <br/> <!--ng-disabled为true时禁止使用，ng-disabled实时监控应用程序--> <button ng-click="reset()" ng-disabled="isUnchanged(user)"> RESET </button> <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)"> SAVE </button> </form> </div> <script type="text/javascript"> var app=angular.module("MyApp",[]); app.controller("Controller",function($scope){ $scope.master = {}; $scope.update=function(user){ $scope.master=$scope.copy(user); }; $scope.reset=function(){ $scope.user=angular.copy($scope.master); }; $scope.isUnchanged=function(user){ //判断user和$scope.master是否相等，相等返回true，否则返回false return angular.equals(user,$scope.master); }; $scope.reset(); }); </script> </body> </html>
5、ng-submit实例
<html ng-app='TestFormModule'> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="https://www.jb51.net/js/angular.min.js"></script> </head> <body><!--ng-submit绑定表单提交事件--> <form ng-submit="save()" ng-controller="TestFormModule"> <input type="text" ng-model="user.userName" required/> <input type="password" ng-model="user.password" required/><br /> <input type="submit" ng-disabled="myForm.$invalid"/> </form> </body> <script type="text/javascript"> var app=angular.module("TestFormModule",[]); app.controller("TestFormModule",function($scope){ $scope.user={ userName:"山水子农", password:'' }; $scope.save=function(){ console.log("保存数据中..."); } }); </script> </html>
6、maxlength和minlength实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://www.jb51.net/js/angular.js" type="text/javascript" charset="utf-8"></script> <title>表单验证</title> </head> <body ng-app="myApp" > <div ng-controller="myCtrl"> <form> <label for="maxlength">Set a maxlength: </label> <input type="number" ng-model="maxlength" /><br> <label for="minlength">Set a minlength: </label> <input type="number" ng-model="minlength" /><br><hr> <label for="input">This input is restricted by the current maxlength and minlength: </label><br> <input type="text" ng-model="textmodel" ng-maxlength="maxlength" ng-minlength="minlength"/><br> text input valid? = <code>{{form.text.$valid}}</code><br> text model = <code>{{textmodel}}</code><br><hr> <label for="input">This input is restricted by the current maxlength and minlength: </label><br> <input type="number" ng-model="numbermodel" ng-maxlength="maxlength" ng-minlength="minlength"/><br> number input valid? = <code>{{form.number.$valid}}</code><br> number model = <code>{{numbermodel}}</code> </form> </div> <script type="text/javascript"> var app=angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.maxlength=8; $scope.minlength=4; }); </script> </body> </html>
7、ng-class实例