一、雙向數據綁定
前面已經提到了雙向數據綁定，一般而言我們總是從模型中拿到數據放到視圖，雙向數據綁定提供了這樣一種機制，可以將視圖中的數據放到模型。下面測試一下
<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>雙向數據綁定</title> </head> <body> <div ng-controller='dataCtrl'> <ul> <li> <div>複選框是否選中：{{isCheck}}</div> <div><input type="checkbox" name="check" ng-model="isCheck"></div> </li> <li> <div>文本框的值:{{text}}</div> <div><input type="text" name="text" ng-model="text"></div> </li> <li> <div>單選按鈕選中的值:{{radio}}</div> <div> 1<input type="radio" name="radio" ng-model="radio" value="1"><br> 2<input type="radio" name="radio" ng-model="radio" value="2"> </div> </li> </ul> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller('dataCtrl',function($scope){ $scope.isCheck = true; $scope.text = "我是文本框初始值！"; $scope.radio = "1"; }) </script> </body> </html>
二、動態創建模型
動態創建模型的意思是我們的scope中本來沒有某個數據模型，但是可以通過用戶交互構建出這樣的一個模型。
<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>雙向數據綁定</title> </head> <body> <div ng-controller='dataCtrl'> <ul> <li ng-repeat="item in fruit"> {{item.name}}:{{item.price}} </li> </ul> <input type="text" name="fruitname" ng-model="f.name"> <input type="number" name="number" ng-model="f.price"> <button ng-click="addFruit(f)">添加水果</button> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller('dataCtrl',function($scope){ $scope.fruit = []; $scope.addFruit = function(item){ $scope.fruit.push(item); } }) </script> </body> </html>
可以看到我們的數據模型中並沒有一個叫做f的數據模型，然而我們將它放到了ng-model中，這樣當用戶在文本框中輸入時就動態創建了f這個數據模型。單擊添加水果時就把這個模型傳到了addFruit函數中。但是這裏會出現一個問題，那就是還沒有和文本框任何交互時就單擊添加水果按鈕時。這時可以調用Angular的工具方法檢測參數angular.isDefined(item)。這樣如果f模型沒有生成則不會執行添加。
<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>雙向數據綁定</title> </head> <body> <div ng-controller='dataCtrl'> <ul> <li ng-repeat="item in fruit"> {{item.name}}:{{item.price}} </li> </ul> <input type="text" name="fruitname" ng-model="f.name"> <input type="number" name="number" ng-model="f.price"> <button ng-click="addFruit(f)">添加水果</button> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller('dataCtrl',function($scope){ $scope.fruit = []; $scope.addFruit = function(item){ if(angular.isDefined(item)&&angular.isDefined(item.name)&&angular.isDefined(item.price)){ $scope.fruit.push(item); } } }) </script> </body> </html>
三、表單驗證
1、校驗變量
| 變量 | 幹嘛的 |
| $pristine | 沒有交互則爲true |
| $dirty | 已經交互返回true |
| $valid | 有效 |
| $invalid | 無效 |
| $error | 錯誤信息 |
2、用CSS來提供反饋
與校驗有關的類
| 類名 | 幹嘛的 |
| ng-pristine | 未交互過的元素會添加這個類 |
| ng-dirty | 交互過的元素添加這個類 |
| ng-valid | 有效的元素添加這個類 |
| ng-invalid | 無效的元素添加這個類 |
簡單測試一下
<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>css校驗反饋</title> <style type="text/css"> form .ng-pristine{ /* 未交互 */ border: 2px solid yellow } form .ng-dirty{ /* 已經交互 */ border: 2px solid blue; } form .ng-dirty.ng-valid{ /* 已經交互且驗證陳宮 */ border: 2px solid green; } form .ng-dirty.ng-invalid{ /* 已經交互且驗證失敗 */ border: 2px solid red; } </style> </head> <body> <div ng-controller='dataCtrl'> <form novalidate="novalidate"> <input type="email" name="email" ng-model="data"> </form> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller('dataCtrl',function($scope){ }) </script> </body> </html>
這裏一定要給表單指定一個ng-model,否則不會添加相應的類，我在這裏卡了很久。
3、使用特殊變量提供反饋
AngularJS做表單校驗時爲我們提供了一些校驗反饋量，藉助這些反饋量可以給用戶提供反饋信息。下面測試
<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>特殊變量校驗反饋</title> <style type="text/css"> </style> </head> <body> <div ng-controller='dataCtrl'> <form novalidate="novalidate" name="myform"> <input type="email" name="email" required="" ng-model="data"> <span ng-show="myform.email.$error.email">請輸出正確的郵箱格式</span> <span ng-show="myform.email.$error.required && myform.email.$dirty">郵箱不能爲空</span> </form> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller('dataCtrl',function($scope){ }) </script> </body> </html>
三、一些表單元素
1、input
| 屬性 | 幹嘛的 |
| ng-model | 雙向綁定 |
| ng-change | change事件 |
| ng-minlength | 最小長度 |
| ng-maxlength | 最大長度 |
| ng-pattern | 指定一個正則表達式 |
| ng-required | 設置required屬性值 |
2、checkbox
| 屬性 | 幹嘛的 |
| ng-model | 雙向數據綁定 |
| ng-change | change事件 |
| ng-true-value | 選中的值 |
| ng-false-value | 取消選中的值 |
3、select
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>select</title> </head> <body> <div ng-controller='dataCtrl'> <h1>你最喜歡啥水果</h1> <select ng-model="selectValue" ng-options="item.id as item.name for item in fruit" ng-change="show(selectValue)"> <option value="">請選擇</option> </select> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('dataCtrl',function($scope){ $scope.fruit = [ {name:"香蕉",id:0}, {name:"蘋果",id:1}, {name:"句子",id:2}, {name:"梨子",id:3}, {name:"西瓜",id:4}, {name:"葡萄",id:5}, ]; $scope.show = function(a){ alert(a); } }) </script> </body> </html>
四、一個綜合性的例子（摘自：http://www.cnblogs.com/rohelm/p/4033513.html）
<!DOCTYPE html>
<html ng-app="myTest"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> <style type="text/css"> body { padding-top: 30px; } </style> </head> <body ng-Controller="myController"> <div class="col-md-6"> <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="name">1.必填項</label> </div> <div class="col-md-8"> <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$valid"></span> </div> </div> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="minlength">2.最小長度=5</label> </div> <div class="col-md-8"> <input type="text" id="minlength" name="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.minlength.$dirty && myForm.minlength.$valid"></span> </div> </div> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="maxlength">3.最大長度=20</label> </div> <div class="col-md-8"> <input type="text" id="maxlength" name="maxlength" ng-model="user.maxlength" ng-maxlength="20" class="form-control" /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.maxlength.$dirty && myForm.maxlength.$valid"></span> </div> </div> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="pattern">4. 模式匹配</label> </div> <div class="col-md-8"> <input type="text" id="pattern" name="pattern" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.pattern.$dirty && myForm.pattern.$valid"></span> </div> </div> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="email">5. 電子郵件</label> </div> <div class="col-md-8"> <input type="email" id="email" name="email" ng-model="user.email" class="form-control" /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.email.$dirty && myForm.email.$valid"></span> </div> </div> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="age">6. 數字</label> </div> <div class="col-md-8"> <input type="number" id="age" name="age" ng-model="user.age" class="form-control" /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.age.$dirty && myForm.age.$valid"></span> </div> </div> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="url"> 7. URL</label> </div> <div class="col-md-8"> <input type="url" id="url" name="url" ng-model="user.url" class="form-control" /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.url.$dirty && myForm.url.$valid"></span> </div> </div> <div class="form-group text-center"> <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" /> </div> </form> </div> <div class="col-md-12"> 1.必填項:{{user.name}} $pristine 【沒修改】：{{myForm.name.$pristine }} $dirty【修改過】：{{myForm.name.$dirty}} $invalid【驗證失敗】：{{myForm.name.$invalid}} $valid【驗證成功】：{{myForm.name.$valid}} required：{{myForm.name.$error.required}}
$error【錯誤詳情】：{{myForm.name.$error}}
<br> 2.最小長度=5:{{user.minlength}} $pristine 【沒修改】：{{myForm.minlength.$pristine }} $dirty【修改過】：{{myForm.minlength.$dirty}} $invalid【驗證失敗】：{{myForm.minlength.$invalid}} $valid【驗證成功】：{{myForm.minlength.$valid}} $error【錯誤詳情】：{{myForm.minlength.$error}} <br> 3.最大長度=20:{{user.maxlength}} $pristine 【沒修改】：{{myForm.maxlength.$pristine }} $dirty【修改過】：{{myForm.maxlength.$dirty}} $invalid【驗證失敗】：{{myForm.maxlength.$invalid}} $valid【驗證成功】：{{myForm.maxlength.$valid}} $error【錯誤詳情】：{{myForm.maxlength.$error}} <br> 4.模式匹配:{{user.pattern}} $pristine 【沒修改】：{{myForm.pattern.$pristine }} $dirty【修改過】：{{myForm.pattern.$dirty}} $invalid【驗證失敗】：{{myForm.pattern.$invalid}} $valid【驗證成功】：{{myForm.pattern.$valid}} $error【錯誤詳情】：{{myForm.pattern.$error}} <br> 5.電子郵件:{{user.email}} $pristine 【沒修改】：{{myForm.email.$pristine }} $dirty【修改過】：{{myForm.email.$dirty}} $invalid【驗證失敗】：{{myForm.email.$invalid}} $valid【驗證成功】：{{myForm.email.$valid}} $error【錯誤詳情】：{{myForm.email.$error}} <br> 6.數字:{{user.age}} $pristine 【沒修改】：{{myForm.age.$pristine }} $dirty【修改過】：{{myForm.age.$dirty}} $invalid【驗證失敗】：{{myForm.age.$invalid}} $valid【驗證成功】：{{myForm.age.$valid}} $error【錯誤詳情】：{{myForm.age.$error}} <br> 7.URL:{{user.url}} $pristine 【沒修改】：{{myForm.url.$pristine }} $dirty【修改過】：{{myForm.url.$dirty}} $invalid【驗證失敗】：{{myForm.url.$invalid}} $valid【驗證成功】：{{myForm.url.$valid}} $error【錯誤詳情】：{{myForm.url.$error}} <br> </div> </body> </html> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myTest',[]) .controller('myController',function($scope) { $scope.submitForm = function(isValid) { if (!isValid) { alert('驗證失敗'); } } }); </script>
感謝Halower 寫了這麼棒的一個例子，這個例子很好的演示瞭如何用AngularJS做表單校驗。（ps:原作者可能複製錯了，成功應該是$valid,不過這不影響，我改過來了）
這裏讓所有驗證都不通過，顯示了錯誤$error中的值。
五、後面的話
Angular還是很強大的，這個表單驗證給我們帶來了諸多方便。繼續學習！