AngularJS教程
/ 模型
模型
ng-model 指令
使用 ng-model 指令，您可以將輸入字段的值綁定到在 AngularJS 中創(chuàng)建的變量。
實(shí)例
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Bill Gates";
});
</script>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
雙向綁定
綁定是雙向的。如果用戶更改輸入字段內(nèi)的值，AngularJS 屬性也會更改其值：
實(shí)例
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
驗(yàn)證用戶輸入
ng-model 指令可以為應(yīng)用程序數(shù)據(jù)（數(shù)字、電子郵件、必填項(xiàng)）提供類型驗(yàn)證：
實(shí)例
<form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span> </form>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
在上面的例子中，僅當(dāng) ng-show 屬性中的表達(dá)式返回 true 時(shí)，才會顯示 span。
如果 ng-model 屬性中的屬性不存在，AngularJS 將為您創(chuàng)建一個(gè)。
應(yīng)用程序狀態(tài)
ng-model 指令可以提供應(yīng)用程序數(shù)據(jù)的狀態(tài)（有效、臟、觸摸、錯(cuò)誤）：
實(shí)例
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS 類
ng-model 指令根據(jù) HTML 元素的狀態(tài)提供 CSS 類：
實(shí)例
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
ng-model 指令根據(jù)表單字段的狀態(tài)添加/刪除以下類：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine