AngularJS使用指令增强标准表单元素功能
angular 可使用指令无缝地增强标准表单元素的功能,我们将讨论它的优点,包括:
数据绑定、建立模型属性、验证表单、验证表单后反馈信息、表单指令属性
下面我们通过案例验证他们的用法:
一、双向数据绑定(ng-model)和建立模型属性
<!doctype> <!-- use module --> <html ng-app="exampleapp"> <head> <title>angular directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> </head> <body> <!-- 案例:双向数据绑定 --> <div class="panel" ng-controller="defaultctrl"> <!-- 过滤complete为false的项 --> <h3 class="panel-header">to do list<span class="label label-info">{{(todos | filter : {complete : 'false'}).length}}</span></h3> <div class="row-fluid"> <div class="col-xs-6"> <div class="form-group row"> <label for="action">action: </label> <!-- ng-model 双向绑定 --> <!-- 双向数据绑定:数据模型(module)和视图(view)之间的双向绑定。 --> <!-- 当其中一方发送更替后,另一个也发生变化 --> <input type="text" id="action" ng-model="newtodo.action" class="form-control"> </div> <div class="form-group row"> <label for="location">location: </label> <select id="location" class="form-control" ng-model="newtodo.location"> <option>home</option> <option>office</option> <option>mall</option> </select> </div> <!-- ng-click点击add添加项目 --> <button class="btn btn-primary btn-block" ng-click="addnewitem(newtodo)">add</button> </div> <div class="col-xs-6"> <table class="table table-bordered table-striped"> <thead> <tr><th>#</th><th>action</th><th>done</th></tr> </thead> <tbody> <tr ng-repeat="item in todos"> <!-- $index默认为0,递增 --> <td>{{$index + 1}}</td> <td>{{item.action}}</td> <td> <input type="checkbox" ng-model="item.complete"/> </td> </tr> </tbody> </table> </div> </div> </div> <script type="text/javascript" src="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 = [ { action : "play ball", complete : false }, { action : "singing", complete : false }, { action : "running", complete : true }, { action : "dance", complete : true }, { action : "swimming", complete : false }, { action : "eating", complete : false }, ]; // 添加数据到模型 $scope.addnewitem = function (newitem) { // 判断是否存在 if (angular.isdefined(newitem) && angular.isdefined(newitem.action) && angular.isdefined(newitem.location)) { $scope.todos.push({ action : newitem.action + " (" + newitem.location + ")", complete : false }) } } }) </script> </body> </html>
首先定义了数据模型scope.todos和添加数据到模型的addnewitem()方法,接着使用双向数据绑定ng−model将视图中表单的action和location和模型中的 scope.todos进行绑定,
最后通过ng-click点击属性触发添加数据到模型的addnewitem()方法完成操作
二、验证表单
在我们提交表单到服务器之前,我们需要来检测一下用户提交的数据是否存在或者是说合法,否则提交无用的数据会浪费资源。
<!doctype> <!-- use module --> <html ng-app="exampleapp"> <head> <title>angular directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div id="todopanel" class="panel" ng-controller="defaultctrl"> <!-- novalidate表示抛弃浏览器自带的表单验证,用ng自己的验证 --> <!-- ng-submit="adduser(newuser) 当表单数据合法时,提交数据到模型 --> <form name="myform" novalidate ng-submit="adduser(newuser)"> <div class="well"> <div class="form-group"> <label>name:</label> <!-- required 表该表单必填 --> <!-- ng-model="newuser.name" 双向数据绑定 --> <input name="username" type="text" class="form-control" required ng-model="newuser.name"> </div> <div class="form-group"> <label>email:</label> <input name="useremail" type="email" class="form-control"required ng-model="newuser.email"> </div> <div class="checkbox"> <label> <input name="agreed" type="checkbox"ng-model="newuser.agreed" required> i agree to the terms and conditions </label> </div> <!-- g-disabled="myform.$invalid" 当前面填写表单中的任意一项不合法时,该提交按钮都是不可用的 --> <button type="submit" class="btn btn-primary btn-block" ng-disabled="myform.$invalid"> ok </button> </div> <div class="well"> message: {{message}} <div> valid: {{myform.$valid}} </div> </div> </form> </div> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript"> angular.module("exampleapp", []) .controller("defaultctrl", function ($scope) { // 添加用户数据到模型$scope.message $scope.adduser = function (userdetails) { $scope.message = userdetails.name + " (" + userdetails.email + ") (" + userdetails.agreed + ")"; } // 显示验证前后的结果 $scope.message = "ready"; }); </script> </body> </html>
首先定义了数据模型scope.message和添加数据到模型的adduser()方法,接着在视图中添加表单元素validate、name属性和ng−submit属性随后使用双向数据绑定ng−model将视图中表单的action和location和模型中的 scope.todos进行绑定,且使用验证属性required和email表单
之后对提交按钮进行禁用,仅当表单数据全部合法才能用,不合法都禁用(ng-disabled=”myform.$invalid”)
最后通过ng-submit属性提交数据到模型的adduser()方法完成操作
三、表单验证反馈信息
我们仅仅对表单进行验证是远远不够的,因为用户不知道为什么出错而感到困惑,因此我们需要反馈信息给用户,让他们明白该填写什么
先介绍一下ng中要验证的类
ng-pristine 用户没交互元素被添加到这个类
ng-dirty 用户交互过元素被添加到这个类
ng-valid 验证结果有效元素被添加到这个类
ng-invalid 验证结果无效元素被添加到这个类
<!doctype> <!-- use module --> <html ng-app="exampleapp"> <head> <title>angular directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <style> /*交互且必填样式*/ form.validate .ng-invalid-required.ng-dirty { background-color: orange; } /*交互不合法样式*/ form .ng-invalid.ng-dirty { background-color: lightpink; } /*邮件不合法且交互过*/ form.validate .ng-invalid-email.ng-dirty { background-color: lightgoldenrodyellow; } div.error{ color: red; font-weight: bold; } div.summary.ng-valid{ color: green; font-weight: bold; } div.summary.ng-invalid{ color: red; font-weight: bold; } </style> </head> <body> <!-- 案例:双向数据绑定 --> <div class="panel" ng-controller="defaultctrl"> <!-- novalidate="novalidate" 仅仅ng表单验证 --> <!-- ng-submit="adduser(newuser)" 添加数据到模型 --> <!-- ng-class="showvalidation ? 'validate' : '' 当验证合法,showvalidation为true,这是触发ng-class为validate --> <form name="myform" class="well" novalidate="novalidate" ng-submit="adduser(newuser)" ng-class="showvalidation ? 'validate' : ''"> <div class="form-group"> <div class=" form-group"> <label>email: </label> <input name="email" type="email" class="form-control" required="required" ng-model="newuser.email"> <!-- 验证提示信息 --> <div class="error"> <!-- 显示反馈信息 --> <span ng-class="error" ng-show="showvalidation"> {{geterror(myform.email.$error)}} </span> </div> </div> <button type="submit" class="btn btn-primary btn-block" >ok</button> <div class="well"> message : {{message}} <!-- 当myform.$valid验证合法,showvalidation为true,这是触发ng-class为ng-valid,否则,ng-invalid --> <div class="summary" ng-class="myform.$valid ? 'ng-valid' : 'ng-invalid'" > valid : {{myform.$valid}} </div> </div> </form> </div> <script type="text/javascript" src="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.adduser = function (userdetails) { if (myform.$valid) { $scope.message = userdetails.name + " (" + userdetails.email + ") (" + userdetails.agreed + ")"; } else { $scope.showvalidation = true; } } // 数据模型 $scope.message = "ready"; // 错误反馈信息 // 当没有填写信息时,提示please enter a value // 当验证出错时,提示please enter a valid email address $scope.geterror = function (error) { if (angular.isdefined(error)) { if (error.required) { return "please enter a value"; } else if (error.email) { return "please enter a valid email address"; } } } }) </script> </body> </html>
首先在style中定义反馈信息的样式、表单验证的样式
接着在js中写入错误时反馈的信息
最后在视图中绑定ng-class
四、表单指令属性
1.使用input元素
<!doctype> <!-- use module --> <html ng-app="exampleapp"> <head> <title>angular directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div class="panel" id="todopanel" ng-controller="defaultctrl"> <form name="myform" novalidate="novalidate"> <div class="well"> <div class="form-group"> <label>text: </label> <!-- ng-required="requirevalue" 通过数据绑定required值 --> <!-- ng-minlength="3" ng-maxlength="10" 允许最大最小字符--> <!-- ng-pattern="matchpattern" 正则匹配 --> <input name="sample" class="form-control" ng-model="inputvalue" ng-required="requirevalue" ng-minlength="3" ng-maxlength="10" ng-pattern="matchpattern"> </div> </div> <div class="well"> <!-- 必填 --> <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="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 rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div class="panel" id="todopanel" ng-controller="defaultctrl"> <form name="myform" novalidate="novalidate"> <div class="well"> <div class="form-group"> <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="" class="">(pick one)</option> </select> </div> </div> <div class="well"> <p>selected: {{selectvalue || "none"}}</p> </div> </form> </div> <script type="text/javascript" src="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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: SpringBoot项目创建与第一个示例