Input directive ng AngularJS

Paglilinaw at Paggamit

Ang pagbabago ng AngularJS <input> Ang default na pag-uugali ng elemento, pero sa kondisyon na mayroon ang attribute na ng-model.

Sila ay nagbibigay ng data binding, na nangangahulugan na sila ay bahagi ng modelo ng AngularJS at maaaring mabigyan ng tugon at i-update sa loob ng function ng AngularJS at DOM.

Sila ay nagbibigay ng pag��证. Halimbawa: may required Ang attribute na <input> Ang elemento, habang ito ay walang laman, ang $valid Ang estado ay itatago bilang false.

Sila ay nagbibigay ng kontrol sa estado. Ipinanatili ng AngularJS ang kasalukuyang estado ng lahat ng elemento ng input.

Ang input field ay may mga sumusunod na estado:

• $untouched Ang laman na ito ay hindi pa napagkakabit
• $touched Ang pinagkakabit ang laman na ito
• $pristine This field has not been modified
• $dirty This field has been modified
• $invalid Field content is invalid
• $valid Field content is valid

Ang halaga ng bawat estado ay kumakatawan sa isang boolean value, na true O false.

Example

Input box na may data binding:

<input ng-model="myInput">
<p>Ang halaga ng input box ay:</p>
<h1>{{myInput}}</h1>

Try It Yourself

Gramatika

<input ng-model="name">

Ginamit ng-model Ang halaga ng attribute na ginamit upang tumukoy sa elemento ng input.

CSS klase

Sa loob ng application ng AngularJS <input> Ang elemento ay binigyan ng ilang klase. Ang mga klase na ito ay maaaring gamitin upang itakda ang estilo ng elemento ayon sa estado ng elemento sa input.

Dinagdag ang mga sumusunod na klase:

• ng-untouched Ang laman na ito ay hindi pa napagkakabit
• ng-touched Ang pinagkakabit ang laman na ito
• ng-pristine This field has not been modified
• ng-dirty This field has been modified
• ng-valid Field content is valid
• ng-invalid Field content is invalid
• ng-valid-key Validate each key every time. For example:ng-valid-requiredIt is very useful when there are multiple things to validate
• ng-invalid-key For example:ng-invalid-required

If the value represented by the class is falseThese classes will be removed.

Example

Apply standard CSS styles to valid and invalid input elements:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

Try It Yourself