Data Binding in AngularJS
Data Binding
Data binding in AngularJS is the synchronization between the model and the view. The application usually has a data model which is a collection of data that is available to use within the project.
Two ways for data binding in AngularJS are:-
- By using ng-bind, which will bind the innerHTML of the element to the specified model property.
- By using ng-model, which binds the HTML control to the view which is actually a two-way binding. In two-way binding, when data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well
For your Information:-
The view is actually a reflection of a controller i.e, if any change happens in the controller, then the view will show it to the end-user on the screen.
ng-bind Directive:-
The ng-bind directive is used to define AngularJS to replace the content of an HTML element with the value of a given variable, or expression.
If the value of the given variable, or expression, changes, the content of the specified HTML element will be changed as well.
Syntax:-
< element ng-bind="expression" >< /element > OR < element class="ng-bind: expression" >< /element >
Further Explanation:-
| Value | Description |
|---|---|
| expression | Specifies a variable, or an expression to evaluate. |
ng-model Directive:-
The ng-model directive binds an HTML form element to a variable in the scope. If the variable does not exist in the scope, it will be created.
Syntax:-
< element ng-model="name" >< /element >
Further Explanation:-
| Value | Description |
|---|---|
| name | The name of the property you want to bind to the form field. |
