Hello friends, in my previous article Hello World , i was explained, how to use one way binding in AngularJS. Now i am going to explain how to use two-way binding in AngularJS.
Two-way binding is flow of data from view to controller and controller to view. In other words, Whenever value of Model modifies, View data will automatically changes. Moreover when data in view modifies model value will automatically changes.
Copy following code and save file TwoWayBinding.html. Open file using any browser.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>.container { padding:5px; margin-bottom: 10px; border:1px solid #3f3f3f;}</style>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<div class="container">
<div class="row">
<div class="col-md-12"><p class="badge badge-secondary">Input from View by HTML Input Controls:</p>
<p>One-Way Data Binding</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
Enter First Name: <input type="text" ng-model="FirstName">
</div>
<div class="col-md-6">
Enter Last Name: <input type="text" ng-model="LastName">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12"><p class="badge badge-secondary">Displaying AngularJS Model Value:</p>
<p>One-Way Data Binding</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
Model Output: {{FirstName}}
</div>
<div class="col-md-4">
Model Output: {{LastName}}
</div>
<div class="col-md-4">
Combined Model: {{FirstName + " " + LastName}}
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12"><a class="btn btn-sm btn-info" ng-click="UpdateViewByController();">Click here to get Value from Controller:</a>
<p>Two-Way Data Binding</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
Controller Intercept to Model : {{ngvar}}
</div>
</div>
</div>
<script>
var app = angular.module("myapp",[]);
app.controller("mycontroller",function($scope){
$scope.UpdateViewByController = function(){
$scope.ngvar = $scope.FirstName + " " + $scope.LastName
}
});
</script>
</body>
</html>
Here three Models are created two from view i.e. FirstName and LastName and other from controller i.e. ngvar. Double curly Braces {{Model-Name}} are used to display model values on view (browser).
One Method is created UpdateViewByController() within AngularJS Controller. and invoked by view. UpdateViewByController() Method gets values from View Model ($scope.FirstName,$scope.LastName) combined them and stored into newly created Model ($scope.ngvar).
//Javascript
$scope.UpdateViewByController = function(){
$scope.ngvar = $scope.FirstName + " " + $scope.LastName
}
UpdateViewByController() method then called by html link control.
//HTML
<a class="btn btn-sm btn-info" ng-click="UpdateViewByController();">Click here to get Value from Controller:</a>
Displaying the model value in html code by
{{ngvar}}
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.