angularjsHow do I implement two-way binding with AngularJS?
Two-way binding in AngularJS is the synchronization of data between the view and the model. It allows to update the view when the model changes, as well as update the model when the view changes.
To implement two-way binding in AngularJS, you can use the ng-model
directive. This directive binds the value of HTML controls (input, select, textarea) to the application data.
For example, if you have a textbox with the ng-model
directive:
<input type="text" ng-model="name">
Then, when you type something in the textbox, the name
variable in the controller is updated automatically.
The following code snippet shows an example of two-way binding in an AngularJS application:
<div ng-controller="MyCtrl">
<input type="text" ng-model="name">
<p>Hello {{name}}!</p>
</div>
<script>
function MyCtrl($scope) {
$scope.name = 'World';
}
</script>
The output of this code is:
Hello World!
When you type something in the text box, the output changes accordingly.
For more information, see the AngularJS documentation.
More of Angularjs
- How can I become an Angular expert from a beginner level?
- How can I create an editable AngularJS application?
- How can I use the Yandex Map API with AngularJS?
- How can I use Angular to zoom in and out of a div?
- How do I install Yarn using Angular?
- How do I use AngularJS to zoom in on an image?
- How do I use Angular Zone to run my code?
- How do I use Angular to zip files?
- How do I use Angular Zone to detect and run Angular change detection?
- How do I copy an element in AngularJS?
See more codes...