AngularJS textarea 指令

定義和用法

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

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

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

它們還提供狀態控制。AngularJS 保存所有文本區域元素的當前狀態。

文本區域字段有以下狀態：

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

每個狀態的值代表一個布爾值，為真或假。

實例

帶有數據綁定的文本區域：

<textarea ng-model="myTextarea"></textarea>
<p>文本區域字段的值為：</p>
<h1>{{myTextarea}}</h1>

親自試一試

語法

<textarea ng-model="name"></textarea>

通過使用 ng-model 屬性的值來引用文本區域元素。

CSS 類

AngularJS 應用程序內的 <textarea> 元素被賦予某些類。這些類可用于根據文本區域元素的狀態設置其樣式。

添加了以下類：

• 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>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>

親自試一試