AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能
Angular 可使用指令無縫地增強(qiáng)標(biāo)準(zhǔn)表單元素的功能,我們將討論它的優(yōu)點(diǎn),包括:
數(shù)據(jù)綁定、建立模型屬性、驗(yàn)證表單、驗(yàn)證表單后反饋信息、表單指令屬性
下面我們通過案例驗(yàn)證他們的用法:
一、雙向數(shù)據(jù)綁定(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> <!-- 案例:雙向數(shù)據(jù)綁定 --> <div class="panel" ng-controller="defaultCtrl"> <!-- 過濾complete為false的項(xiàng) --> <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 雙向綁定 --> <!-- 雙向數(shù)據(jù)綁定:數(shù)據(jù)模型(Module)和視圖(View)之間的雙向綁定。 --> <!-- 當(dāng)其中一方發(fā)送更替后,另一個也發(fā)生變化 --> <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點(diǎn)擊Add添加項(xiàng)目 --> <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默認(rèn)為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) { // 數(shù)據(jù)模型 $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 }, ]; // 添加數(shù)據(jù)到模型 $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>
首先定義了數(shù)據(jù)模型scope.todos和添加數(shù)據(jù)到模型的addNewItem()方法,接著使用雙向數(shù)據(jù)綁定ng−model將視圖中表單的action和location和模型中的 scope.todos進(jìn)行綁定,
最后通過ng-click點(diǎn)擊屬性觸發(fā)添加數(shù)據(jù)到模型的addNewItem()方法完成操作
二、驗(yàn)證表單
在我們提交表單到服務(wù)器之前,我們需要來檢測一下用戶提交的數(shù)據(jù)是否存在或者是說合法,否則提交無用的數(shù)據(jù)會浪費(fèi)資源。
<!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表示拋棄瀏覽器自帶的表單驗(yàn)證,用NG自己的驗(yàn)證 --> <!-- ng-submit="addUser(newUser) 當(dāng)表單數(shù)據(jù)合法時,提交數(shù)據(jù)到模型 --> <form name="myForm" novalidate ng-submit="addUser(newUser)"> <div class="well"> <div class="form-group"> <label>Name:</label> <!-- required 表該表單必填 --> <!-- ng-model="newUser.name" 雙向數(shù)據(jù)綁定 --> <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" 當(dāng)前面填寫表單中的任意一項(xiàng)不合法時,該提交按鈕都是不可用的 --> <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) { // 添加用戶數(shù)據(jù)到模型$scope.message $scope.addUser = function (userDetails) { $scope.message = userDetails.name + " (" + userDetails.email + ") (" + userDetails.agreed + ")"; } // 顯示驗(yàn)證前后的結(jié)果 $scope.message = "Ready"; }); </script> </body> </html>
首先定義了數(shù)據(jù)模型scope.message和添加數(shù)據(jù)到模型的addUser()方法,接著在視圖中添加表單元素validate、name屬性和ng−submit屬性隨后使用雙向數(shù)據(jù)綁定ng−model將視圖中表單的action和location和模型中的 scope.todos進(jìn)行綁定,且使用驗(yàn)證屬性required和email表單
之后對提交按鈕進(jìn)行禁用,僅當(dāng)表單數(shù)據(jù)全部合法才能用,不合法都禁用(ng-disabled=”myForm.$invalid”)
最后通過ng-submit屬性提交數(shù)據(jù)到模型的addUser()方法完成操作
三、表單驗(yàn)證反饋信息
我們僅僅對表單進(jìn)行驗(yàn)證是遠(yuǎn)遠(yuǎn)不夠的,因?yàn)橛脩舨恢罏槭裁闯鲥e而感到困惑,因此我們需要反饋信息給用戶,讓他們明白該填寫什么
先介紹一下NG中要驗(yàn)證的類
ng-pristine 用戶沒交互元素被添加到這個類
ng-dirty 用戶交互過元素被添加到這個類
ng-valid 驗(yàn)證結(jié)果有效元素被添加到這個類
ng-invalid 驗(yàn)證結(jié)果無效元素被添加到這個類
<!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> <!-- 案例:雙向數(shù)據(jù)綁定 --> <div class="panel" ng-controller="defaultCtrl"> <!-- novalidate="novalidate" 僅僅NG表單驗(yàn)證 --> <!-- ng-submit="addUser(newUser)" 添加數(shù)據(jù)到模型 --> <!-- ng-class="showValidation ? 'validate' : '' 當(dāng)驗(yàn)證合法,showValidation為true,這是觸發(fā)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"> <!-- 驗(yàn)證提示信息 --> <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}} <!-- 當(dāng)myForm.$valid驗(yàn)證合法,showValidation為true,這是觸發(fā)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) { // 添加數(shù)據(jù)到模型 $scope.addUser = function (userDetails) { if (myForm.$valid) { $scope.message = userDetails.name + " (" + userDetails.email + ") (" + userDetails.agreed + ")"; } else { $scope.showValidation = true; } } // 數(shù)據(jù)模型 $scope.message = "Ready"; // 錯誤反饋信息 // 當(dāng)沒有填寫信息時,提示Please enter a value // 當(dāng)驗(yàn)證出錯時,提示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中定義反饋信息的樣式、表單驗(yàn)證的樣式
接著在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" 通過數(shù)據(jù)綁定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> <!-- 驗(yàn)證合法 --> <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 改變選項(xiàng)值--> <!-- 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) { // 模型數(shù)據(jù) $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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
- 詳細(xì)分析使用AngularJS編程中提交表單的方式
- 詳解AngularJS實(shí)現(xiàn)表單驗(yàn)證
- AngularJS表單編輯提交功能實(shí)例
- AngularJS的表單使用詳解
- AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證和表單驗(yàn)證功能
- angularjs $http實(shí)現(xiàn)form表單提交示例
- AngularJS手動表單驗(yàn)證
- AngularJS自動表單驗(yàn)證
- AngularJS實(shí)現(xiàn)表單元素值綁定操作示例
相關(guān)文章
快速解決angularJS中用post方法時后臺拿不到值的問題
今天小編就為大家分享一篇快速解決angularJS中用post方法時后臺拿不到值的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08angularJs自定義過濾器實(shí)現(xiàn)手機(jī)號信息隱藏的方法
今天小編就為大家分享一篇angularJs自定義過濾器實(shí)現(xiàn)手機(jī)號信息隱藏的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10AngularJS封裝$http.post()實(shí)例詳解
這篇文章主要介紹了 AngularJS封裝$http.post()實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05