AngularJS入門教學之AngularJS模型_AngularJS-js教程-PHP中文網

AngularJS入門教學之AngularJS模型_AngularJS

WBOY

發布： 2016-05-16 15:05:02

原創

1320 人瀏覽過

相關閱讀：

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模型，希望對大家有幫助！