What is ng-model in AngularJS?
177
19-Jun-2024
Updated on 19-Jun-2024
Ashutosh Kumar Verma
19-Jun-2024Angular js ng-model
The
ng-modeldirective in AngularJS is used to bind the value of HTML controls (such as input, select, textarea) to application data. It is a two-way data binding between a control and a property defined in the AngularJS controller or scope.Here is how the ng-model works,
Binding Data- Binds the value of HTML controls to application data. When the data in the controller or scope changes, the HTML control is automatically updated, and vice versa.
Syntax-
Here is a simple syntax to demonstrate the ng-model in the HTML template,
Two-way data binding-
ng-modelfor two-way data binding, ie. changing the input field updates the model in scope, and changing the scope model updates the input field removes this synchronization is automatic without requiring explicit event handling or DOM usage in a negative way.Usage- In addition to
<input>,ng-modelcan also be used with<select>and<textarea>, making it versatile for various user input controls.Validation-
ng-modelalso seamlessly integrates with AngularJS’s form validation features, allowing you to easily validate user input using AngularJS’s built-in validation directivesOverall, the
ng-modelsimplifies the process of handling user input and manages the state of application data associated with that input in AngularJS applications.Also, Read: What are AngularJS key features?