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
|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 BindingGive 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.