Search within TutorialsPark

AngularJS Directives : Data Binding


Learn how to use AngularJS Built-in Data Binding Directives to perform Data Binding


AngularJS Directives : Data Binding Directives

AngularJS provides a set of built-in directives, to perform data-binding between the model and the view.

The data-binding feature is one of the important features of angularJS, and most of the elements within the application are binded to some sort of Data.

The table below has a list of Data- Binding Directives

Table : Arguments for method angular.module

Name Description Try It
ng-bind To bind the innerText property of an HTML element. Try»
ng-bind-html To create data-binding using the property innerHTML of HTML element. Try»
ng-bind-template Similar to ng-bind but multiple template expressions can be specified as a value. Try»
ng-model To create bi-directional binding between the data model and view. Try»
ng-non-bindable To specify a content region within which no data binding is performed. Try»

AngularJS Data Binding Directives : Single Direction Data Binding

In AngularJS single direction data binding, the data from the data model is displayed in the HTML element(view),this data binding is live, meaning if the value in the data model change, the same is reflected in the view in realtime.

To create single direction binding, the directive ng-bind is used, most of the time it is not used direclty because the same effect can be achieved using curly braces as well.

Syntax: AngularJS Built-in Directives Single Direction binding using ng-bind


Example: AngularJS Built-in Directives Single Direction Binding

Give it a TRY! » Note: Both the binding technique provide the same result.

AngularJS Data Binding : Bi-Directional Data Binding

In AngularJS, the Bi-Directional data binding is used to monitor changes at both end, i.e the Data Model as well as the View.

A Bi-directional databinding is created using directive ng-model, both the data-binding is performed on the bill property of the array payBill.

Example: Angular JS Controller Applying Controllers to View

Give it a TRY! » Note: The first binding is one way Binding, while the second one using input element is bi-directional