AngularJS ng-model 指令
ng-model 指令將 HTML 控制元件（input、select、textarea）的值繫結到應用程式資料。
ng-model 指令
使用 ng-model 指令，您可以將輸入欄位的值繫結到 AngularJS 中建立的變數。
示例
<div ng-app="myApp" ng-controller="myCtrl">
姓名：<input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
自己動手試一試 »
雙向繫結
繫結是雙向的。如果使用者更改輸入欄位中的值，AngularJS 屬性的值也會更改。
示例
<div ng-app="myApp" ng-controller="myCtrl">
姓名：<input ng-model="name">
<h1>您輸入了：{{name}}</h1>
</div>
自己動手試一試 »
驗證使用者輸入
ng-model 指令可以為應用程式資料提供型別驗證（數字、電子郵件、必需）。
示例
<form ng-app="" name="myForm">
電子郵件
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">無效的電子郵件地址</span>
</form>
自己動手試一試 »
在上面的示例中，span 僅在 ng-show 屬性中的表示式返回 true 時顯示。
如果 ng-model 屬性中的屬性不存在，AngularJS 會為您建立一個。
應用程式狀態
ng-model 指令可以為應用程式資料提供狀態（有效、髒、已觸控、錯誤）。
示例
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
電子郵件
<input type="email" name="myAddress" ng-model="myText" required>
<h1>狀態</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
自己動手試一試 »
CSS 類
ng-model 指令根據表單欄位的狀態為 HTML 元素提供 CSS 類。
示例
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
輸入您的姓名
<input name="myName" ng-model="myText" required>
</form>
自己動手試一試 »
ng-model 指令根據表單欄位的狀態新增/刪除以下類：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
