In this post, you will learn about the data binding in angularJs. It is one of the powerful feature which angularJs provides.
There is two-way data binding in angularJs to bind data between model and view.
The data binding mechanism is handled with the functions: $watch(), $digest() and $apply() to update new values.
Any changes you do in the view updates the model and any changes you do in the model updates view also. This is called two-way data binding.
Angular uses $watch that will look into model changes on the scope. If the value on the scope changes, then view is updated automatically. It is done by $digest cycle.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body ng-app ng-init="firstName = swati; lastName = kothiyal;>
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> <span ng-bind="lastName"></span><br />
<br />
<label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
<label>Set the last name: <input type="text" ng-model="lastName"/></label>
</body>
</html>
In the above example when you will change the value of the input field it will automatically change the value inside strong element.
0 Comment(s)