[Vuejs]-2 way binding : A practical example

by

0👍

If you have a form and in it some values which user updates.
If you want these values to be bind to some model in your component and ultimately update it in back-end. here comes use of data binding.
and reverse of it some values coming from model in component and you want it to get reflected in your UI form.

0👍

The practical example of 2-way data binding is say you stored some value in frontend using an array and then you populate the whole data of the array in html. After that you change some keys value of the array then without refreshing the page the value get automatically populate in the frontend which is not possible without 2-way binding.

0👍

please check below working code is perfect example of two way binding:

var app = angular.module('mainApp', []);

	app.controller("MainCtrl", function($scope){
		$scope.ctrlRole = "Prabhat"
	});

	app.directive("myEmployee", function() {

		return {
			scope:
			{
				role:"="
			},
			template: 'From Directive : <input type="text" ng-model="role">'
		};
	});
<!DOCTYPE html>
<html>
    <head lang="en">
      <meta charset="utf-8">
      <title>AngularJS Isolate Scope</title>

    </head>
    <body>

      <div ng-app="mainApp">
		<div ng-controller="MainCtrl">

			<div> From Controller : <input type="text" ng-model="ctrlRole"></div><br>

           		<div my-employee role="ctrlRole"></div>

		</div>
	</div>

      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
      <script type="text/javascript" src="app.js"></script>
    </body>
</html>

Leave a comment