AngularJS input 指令

AngularJS 參考手冊

定義和用法

AngularJS 修改 <input> 元素的默認行為，但前提是 ng-model 屬性存在。

它們提供數據綁定，這意味著它們是 AngularJS 模型的一部分，并且可以在 AngularJS 函數和 DOM 中引用和更新。

它們提供驗證。示例：具有 required 屬性的 <input> 元素，只要它為空，其 $valid 狀態就會被設置為 false。

它們還提供狀態控制。AngularJS 保存所有輸入元素的當前狀態。

輸入字段有以下狀態：

  • $untouched 該字段尚未被觸碰
  • $touched 該字段已被觸碰
  • $pristine 該字段尚未被修改
  • $dirty 該字段已被修改
  • $invalid 字段內容無效
  • $valid 字段內容有效

每個狀態的值代表一個布爾值，為 true 或 false。

實例

帶有數據綁定的輸入框：

<input ng-model="myInput">
<p>輸入框的值為：</p>
<h1>{{myInput}}</h1>

親自試一試

語法

<input ng-model="name">

使用 ng-model 屬性的值來引用輸入元素。

CSS 類

AngularJS 應用程序內的 <input> 元素被賦予某些類。這些類可用于根據輸入元素的狀態設置其樣式。

添加了以下類：

  • 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>

親自試一試

AngularJS 參考手冊