2 way data binding angularjs
angularjs directive two way binding
angularjs two way binding example
ng-model directive example
angularjs ng-model example
In this video we will discuss, Two way databinding in AngularJS. Along the way we also discuss one of the very useful directive in angular ng-model.
One of the most useful feature in AngularJS is the Two Way Data-Binding. The Two Way Data-Binding, keeps the model and the view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.
When the model changes the view is automatically updated. This is achieved using the data binding expression in the view.
How about the other way round. How to keep the model up to date when the view changes. That’s exactly is the purpose of ng-model directive.
In the html below, notice the input element is decorated with ng-model directive. This ensures that whenever the value in the textbox is changed, angular will automatically update the message property of the $scope object. This means the ng-model directive automatically takes the form values and updates the model. The binding expression does the opposite, i.e whenever the model changes the view is automatically updated.
Because of the two way data binding provided by angular, as you type in the textbox, the value is immediately displayed on the view just below the textbox. This two way binding feature provided by angular, eliminates the need to write any custom code to move data from the model to the view or from the view to the model.
ng-model directive can be used with the following 3 html elements
input
select
textarea
Two way binding example with complex object is also discussed.
Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
