<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</title> <meta charset="utf-8"/> <link type="text/css" href="https://www.jb51.net/css/bootstrap.min.css"> <link type="text/css" href="https://www.jb51.net/css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div ng-controller="defaultCtrl"> <form novalidate="novalidate"> <div> <div> <label>Text: </label> <!-- ng-required="requireValue" 通过数据绑定required值 --> <!-- ng-minlength="3" ng-maxlength="10" 允许最大最小字符--> <!-- ng-pattern="matchPattern" 正则匹配 --> <input ng-model="inputValue" ng-required="requireValue" ng-minlength="3" ng-maxlength="10" ng-pattern="matchPattern"> </div> </div> <div> <!-- 必填 --> <p>Required Error: {{myForm.sample.$error.required}}</p> <!-- 最小最大长度 --> <p>Min Length Error: {{myForm.sample.$error.minlength}}</p> <p>Max Length Error: {{myForm.sample.$error.maxlength}}</p> <!-- 只匹配小写字母 --> <p>Pattern Error: {{myForm.sample.$error.pattern}}</p> <!-- 验证合法 --> <p>Element Valid: {{myForm.sample.$valid}}</p> </div> </form> </div> <script type="text/javascript" src="https://www.jb51.net/js/angular.min.js"></script> <script type="text/javascript"> // define a module named exampleApp angular.module("exampleApp", []) // define a controller named defaultCtrl .controller('defaultCtrl', function ($scope) { $scope.requireValue = true; $scope.matchPattern = new RegExp("^[a-z]"); }) </script> </body> </html>
2.选择列表
<!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</title> <meta charset="utf-8"/> <link type="text/css" href="https://www.jb51.net/css/bootstrap.min.css"> <link type="text/css" href="https://www.jb51.net/css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div ng-controller="defaultCtrl"> <form novalidate="novalidate"> <div> <div> <label>Selection an action: </label> <!-- 遍历列表 按照item.place排序 item.id as item.action 改变选项值--> <!-- ng-options="item.id as item.action group by item.place for item in todos" --> <select ng-model="selectValue" ng-options="item.id as item.action group by item.place for item in todos"> <option value="">(Pick One)</option> </select> </div> </div> <div> <p>Selected: {{selectValue || "None"}}</p> </div> </form> </div> <script type="text/javascript" src="https://www.jb51.net/js/angular.min.js"></script> <script type="text/javascript"> // define a module named exampleApp angular.module("exampleApp", []) // define a controller named defaultCtrl .controller('defaultCtrl', function ($scope) { // 模型数据 $scope.todos = [ { id : 100, place : "School", action : "play ball", complete : false }, { id : 200, place : "Home", action : "eating", complete : false }, { id : 300, place : "Home", action : "watch TV", complete : true } ]; }) </script> </body> </html>
