AngularJS input 指令
定義和用法
AngularJS 修改了 <input> 元素的預設行為，但前提是必須存在 ng-model 屬性。
它們提供了資料繫結，這意味著它們是 AngularJS 模型的一部分，並且可以在 AngularJS 函式和 DOM 中引用和更新。
它們提供驗證。示例：帶有 required 屬性的 <input> 元素，只要它為空，其 $valid 狀態就會被設定為 false。
它們還提供狀態控制。AngularJS 維護所有輸入元素的當前狀態。
輸入欄位具有以下狀態
$untouched欄位尚未被觸控$touched欄位已被觸控$pristine欄位尚未被修改$dirty欄位已被修改$invalid欄位內容無效$valid欄位內容有效
每個狀態的值代表一個布林值，即 true 或 false。
語法
<input ng-model="name">
輸入元素透過使用 ng-model 屬性的值來引用。
CSS 類
AngularJS 應用程式內的 <input> 元素會獲得特定的類。這些類可用於根據輸入元素的狀態對其進行樣式設定。
添加了以下類
ng-untouched欄位尚未被觸控ng-touched欄位已被觸控ng-pristine欄位尚未被修改ng-dirty欄位已被修改ng-valid欄位內容有效ng-invalid欄位內容無效ng-valid-key每個驗證一個 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>
自己動手試一試 »
