例
データバインディングを持つ入力欄：
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
»それを自分で試してみてください 定義と使用法
AngularJSは、デフォルトの動作修正<input>要素を、しかし場合にのみ、 ng-model属性が存在しています。
彼らは、データバインディング、彼らはAngularJSモデルの一部であり、AngularJS機能およびDOMの両方で、と呼ばれ、更新することができる手段を提供します。
彼らは、検証を提供します。 例： <input>を持つ要素required属性は、持っている$validに設定された状態false限り、それは空であるように。
彼らはまた、状態制御を提供します。 AngularJSは、すべての入力要素の現在の状態を保持しています。
入力フィールドは、次の状態があります。
-
$untouchedフィールドはまだ触れられていません -
$touchedフィールドがタッチされました -
$pristine分野はまだ修正されていません -
$dirtyフィールドが変更されました -
$invalidフィールドの内容が有効ではありません -
$validフィールドの内容が有効です
各状態の値がブール値を表しており、いずれかであるtrueまたはfalse 。
構文
<input ng-model=" name "> 入力要素は値使用して呼ばれているng-model属性を。
CSSクラス
<input> AngularJSアプリケーション内の要素は、特定のクラス与えられています。 これらのクラスは、その状態に応じた入力要素のスタイルを使用することができます。
以下のクラスが追加されます。
-
ng-untouchedフィールドにはまだ触れられていません -
ng-touchedフィールドは、タッチされました -
ng-pristine分野はまだ修正されていません -
ng-dirtyフィールドが変更されました -
ng-validフィールドの内容が有効です -
ng-invalidフィールドの内容が有効ではありません -
ng-valid- key各検証のための一つの鍵 。 例：ng-valid-required検証する必要がありますつ以上のものがある場合に、有用です -
ng-invalid- key例：ng-invalid-required
それらが表す値であればクラスは削除されますfalse 。
例
標準のCSSを使用して、有効および無効な入力要素のスタイルを適用します。
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
»それを自分で試してみてください