AngularJS

AngularJS Directives

AngularJS Filters and Elements

AngularJS Tutorials

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.

Code Explanation

All Tutorials related to AngularJS Tutorials

All Sections related to AngularJS