NG-モデルディレクティブは、アプリケーションデータへのHTMLコントロール（入力、選択、テキストエリア）の値をバインドします。
NG-モデル指令
ng-modelディレクティブはAngularJSで作成した変数に入力フィールドの値をバインドすることができます。
例
<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
= "John Doe";
});
</script> »それを自分で試してみてください 双方向バインディング
結合は、両方の方法を行きます。 ユーザーが入力フィールド内の値を変更した場合、AngularJSプロパティは、それが値です変更されます。
例
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
»それを自分で試してみてください ユーザー入力を検証
ng-modelディレクティブは、アプリケーションデータ（番号、電子メール、必須）用の型の検証を提供することができます。
例
<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>
»それを自分で試してみてください 上記の例では、スパンが中での発現の場合にのみ表示されますng-show属性が返されますtrue 。
 | 内のプロパティ場合はng-model属性が存在しない場合、AngularJSはあなたのための1つを作成します。 |
|---|
申請状況
ng-modelディレクティブは、アプリケーションデータ（無効、汚い、触れて、エラー）のステータスを提供することができます：
例
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
Email:
<input type="email" name="myAddress" ng-model="myText"
required>
<h1>Status</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">
Enter your name:
<input name="myAddress" ng-model="text" required>
</form>
»それを自分で試してみてください ng-modelディレクティブは/フォームフィールドの状況に応じて、以下のクラスを削除します追加します。
- NG-空
- NG-、空ではありません
- NG-触れました
- NG-手付かず
- NG-有効
- NG-無効
- NG-汚いです
- NG-保留中
- NG-手付かず