Simple Two Way Data Binding Using AngularJS

Submitted by razormist on Tuesday, January 31, 2017 - 15:16.
In this tutorial, we will try to create a Simple Two Way Data Binding Using AngularJS. AngularJS is a structural framework for dynamic web apps. It is a kind of template that extends HTML to a new level of coding techniques. It is mostly used by other well known site for creating a template. So let's get started. Creating A Mark-up This a form for displaying the value when the user input a value. To do that open any kind of text editor(notepad++, etc..) 
  1. <!DOCTYPE html>
  2. <html lang = "en">
  3. 	<head>
  4. 		<meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
  5. 		<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
  6. 		<script src = "js/angular.js"></script>
  7. 		<script src = "js/script.js"></script>
  8. 	</head>
  9. <body ng-app = "myModule">
  10. 	<nav class = "navbar navbar-default">
  11. 		<div class = "container-fluid">
  12. 			<a class = "navbar-brand" href = "https://www.sourcecodester.com">Sourcecodester</a>
  13. 		</div>
  14. 	</nav>
  15. 	<div class = "col-md-3"></div>
  16. 	<div class = "col-md-6 well" ng-controller = "myController">
  17. 		<h3 class  = "text-primary">Simple Two Way Data Binding Using AngularJS</h3>
  18. 		<hr  style = "border-top:1px dotted #000;"/>
  19. 		<textarea class = "form-control" style = "resize:none;" ng-model = "result"></textarea>
  20. 		<br />
  21. 		<div style = "float:left; margin:10px;">{{result}}</div>
  22. 		<div style = "float:left; margin:10px;">{{result}}</div>
  23. 		<div style = "float:left; margin:10px;">{{result}}</div>
  24. 		<div style = "float:left; margin:10px;">{{result}}</div>
  25. 		<div style = "float:left; margin:10px;">{{result}}</div>
  26. 		<div style = "float:left; margin:10px;">{{result}}</div>
  27. 		<div style = "float:left; margin:10px;">{{result}}</div>
  28. 		<div style = "float:left; margin:10px;">{{result}}</div>
  29. 		<div style = "float:left; margin:10px;">{{result}}</div>
  30. 		<div style = "float:left; margin:10px;">{{result}}</div>
  31. 		<div style = "float:left; margin:10px;">{{result}}</div>
  32. 		<div style = "float:left; margin:10px;">{{result}}</div>
  33. 		<div style = "float:left; margin:10px;">{{result}}</div>
  34. 		<div style = "float:left; margin:10px;">{{result}}</div>
  35. 		<div style = "float:left; margin:10px;">{{result}}</div>
  36. 		<div style = "float:left; margin:10px;">{{result}}</div>
  37. 		<div style = "float:left; margin:10px;">{{result}}</div>
  38. 		<div style = "float:left; margin:10px;">{{result}}</div>
  39. 		<div style = "float:left; margin:10px;">{{result}}</div>
  40. 		<div style = "float:left; margin:10px;">{{result}}</div>
  41. 		<div style = "float:left; margin:10px;">{{result}}</div>
  42. 		<div style = "float:left; margin:10px;">{{result}}</div>
  43. 		<div style = "float:left; margin:10px;">{{result}}</div>
  44. 		<div style = "float:left; margin:10px;">{{result}}</div>
  45. 		<div style = "float:left; margin:10px;">{{result}}</div>
  46. 		<div style = "float:left; margin:10px;">{{result}}</div>
  47. 		<div style = "float:left; margin:10px;">{{result}}</div>
  48. 		<div style = "float:left; margin:10px;">{{result}}</div>
  49. 		<div style = "float:left; margin:10px;">{{result}}</div>
  50. 		<div style = "float:left; margin:10px;">{{result}}</div>
  51. 		<div style = "float:left; margin:10px;">{{result}}</div>
  52. 		<div style = "float:left; margin:10px;">{{result}}</div>
  53. 		<div style = "float:left; margin:10px;">{{result}}</div>
  54. 		<div style = "float:left; margin:10px;">{{result}}</div>
  55. 		<div style = "float:left; margin:10px;">{{result}}</div>
  56. 		<div style = "float:left; margin:10px;">{{result}}</div>
  57. 		<div style = "float:left; margin:10px;">{{result}}</div>
  58. 		<div style = "float:left; margin:10px;">{{result}}</div>
  59. 		<div style = "float:left; margin:10px;">{{result}}</div>
  60. 		<div style = "float:left; margin:10px;">{{result}}</div>
  61. 	</div>
  62. </body>	
  63. </html>
The code above will display the result when you enter a value in the textarea ng-model - directive binds an input , select , textarea to a property on the scope using ng-myController which is created and exposed by this directive {{result}} - after the data is bind, it will display the exact value that has been input Creating A Script To Make AngularJS Worked This script will make the angularJS to work with the mark-up form 
  1. var myApp = angular.module("myModule", [])
  2.                                 .controller("myController", function($scope){
  3. });
The script above will typically create a module name "myModule" that will associate with controller function when included in the mark-up form. There you have it we create a simple two way data binding using angularjs. I hope that this tutorial help you to your project. For more updates and tutorials, just kindly visit this site. Enjoy Coding!!

Tags

Add new comment

About text formats
  • 7 views