AngularJS input Directive

Definition and Usage

AngularJS na yi <input> default behavior na element, amma ayyan kawai yadda ake da属性 ng-model.

Kwarin na iya koyar da data binding, waɗanda ke nufin cewa su ne ɓangare na model na AngularJS, kuma za a iya samun da ake samarwa a cikin function na AngularJS da DOM.

Kwarin na iya koyar da validation. Misali: kwarin da: required daukar nau'warin <input> element, kamar yadda a yake kai, shi ne: $valid hali a zama false.

Kuma suke da control na hali. AngularJS a kai kallance hali na kowane input element.

Input field na da hali da suka:

• $untouched a kwarin ya kai sauri
• $touched a kwarin ya a kai gurɗa
• $pristine This field has not been modified
• $dirty This field has been modified
• $invalid Field content is invalid
• $valid Field content is valid

Kowane hali na daki yana da burin boolean, yana da: true tana da false.

Example

Input box da ke data binding:

<input ng-model="myInput">
<p>Wurin input a ya yi:</p>
<h1>{{myInput}}</h1>

Try It Yourself

Syntax

<input ng-model="name">

amfani da ng-model daukar nau'warin a kwananin kwarin don nuna input element.

CSS Class

AngularJS Application na <input> Element a yadda a dace ko kwarin da suke da kwarin. Kwarin na iya amfani da su don tura layin a cikin hali na input element.

A kwarin a yadda a dace ko:

• ng-untouched a kwarin ya kai sauri
• ng-touched a kwarin ya a kai gurɗa
• 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 each time. For example:ng-valid-requiredVery useful when more than one thing must be validated
• ng-invalid-key For example:ng-invalid-required

If the value represented by the class is falseIf these classes are 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