相關閱讀：
AngularJS入門教程之AngularJS運算式
AngularJS入門教程之AngularJS指令
在前面運算式和指令的教程中瞭解到，AngularJS模型（ng-model）可以將HTML輸入欄位中的值與AngularJS建立的變數綁定。
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="" ng-init="name='Jone Snow'">名字: <input ng-model="name"></div></body></html>
雙向繫結 AngularJS的雙向繫結， 是指ng-model與HTML的輸入欄位綁定，同時也與AngularJS的屬性綁定，所以當輸入欄位的值改變的時候，AngularJS的屬性值也會改變。
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name"><h1>你輸入了: {{name}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.name = "John Snow";});</script><p>修改輸入框的值，標題的名字也會相應修改。</p></body></html>
應用狀態 ng-model 指令可以為應用資料提供狀態值
dirty 當資料被修改時狀態為TRUE，沒有被修改過為FALSE。即使修改為原來的值，也為TRUE。
valid 輸入值合法時為TRUE，不合法則為FALSE。
touched 通過觸屏點擊為TRUE，沒有點擊為FALSE。
根據狀態來應用CSS樣式
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><style>input.ng-invalid {background-color: lightblue;}</style><body><form ng-app="" name="myForm">輸入你的名字:<input name="myAddress" ng-model="text" required></form></body></html>
input域增加了required狀態，當input域沒有輸入時，ng-model為input域增加ng-invalid樣式。反之則刪除ng-invalid樣式。 ng-model 指令根據表單域的狀態添加/移除以下樣式： - ng-empty - ng-not-empty - ng-touched - ng-untouched - ng-valid - ng-invalid - ng-dirty - ng-pending - ng-pristine 使用ng-model驗證郵箱格式
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><form ng-app="" name="myForm">Email:<input type="email" name="myAddress" ng-model="text"><span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span></form></body></html>
myForm.myAddress.$error.email屬性為TRUE（郵箱格式不正確）時，ng-show會控制span的內容顯示出來。
以上內容是小編給大家介紹的AngularJS入門教程之AngularJS模型，希望對大家有所協助！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
