這篇文章主要介紹了AngularJS入門(mén)教程之AngularJS模型的相關(guān)資料,需要的朋友可以參考下
在前面表達(dá)式和指令的教程中了解到，AngularJS模型（ng-model）可以將HTML輸入域中的值與AngularJS創(chuàng)建的變量綁定。
<!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的輸入域綁定，同時(shí)也與AngularJS的屬性綁定，所以當(dāng)輸入域的值改變的時(shí)候，AngularJS的屬性值也會(huì)改變。
<!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>修改輸入框的值，標(biāo)題的名字也會(huì)相應(yīng)修改。</p>
</body>
</html>
應(yīng)用狀態(tài) ng-model 指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值
dirty 當(dāng)數(shù)據(jù)被修改時(shí)狀態(tài)為T(mén)RUE，沒(méi)有被修改過(guò)為FALSE。即使修改為原來(lái)的值，也為T(mén)RUE。
valid 輸入值合法時(shí)為T(mén)RUE，不合法則為FALSE。
touched 通過(guò)觸屏點(diǎn)擊為T(mén)RUE，沒(méi)有點(diǎn)擊為FALSE。
根據(jù)狀態(tài)來(lái)應(yīng)用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狀態(tài)，當(dāng)input域沒(méi)有輸入時(shí)，ng-model為input域增加ng-invalid樣式。反之則刪除ng-invalid樣式。 ng-model 指令根據(jù)表單域的狀態(tài)添加/移除以下樣式： - ng-empty - ng-not-empty - ng-touched - ng-untouched - ng-valid - ng-invalid - ng-dirty - ng-pending - ng-pristine 使用ng-model驗(yàn)證郵箱格式
<!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">不是一個(gè)合法的郵箱地址</span>
</form>
</body>
</html>
myForm.myAddress.$error.email屬性為T(mén)RUE（郵箱格式不正確）時(shí)，ng-show會(huì)控制span的內(nèi)容顯示出來(lái)。
以上內(nèi)容是小編給大家介紹的AngularJS入門(mén)教程之AngularJS模型，希望對(duì)大家有所幫助！