Post
Ask Question

ng-model Directive in AngularJS

The ng-model directive binds the value of HTML controls to application data. It gets the input and binds it to its own expression.

Sample Demo:

Write the following HTML code,

  1. <!doctype html>  
  2. <html ng-app>  
  3.   
  4. <head>  
  5.     <title>ng-model directive in Angular JS</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10.     <div> <input type="text" ng-model="sampletext" placeholder="enter text here">  
  11.         <h1>{{ sampletext }}</h1> </div>  
  12. </body>  
  13.   
  14. </html>  
Here we have specified ng-model attributes to the input textbox. And we want to display the text entered in the textbox below it. So using ng-model we can achieve this just by assigning a name to the ng-model and using this name wherever we want the text to be displayed.

Angular JS binds the sampletext to the input textbox and It assigns the value of textbox to sampletext. This is done automatically by Angular JS.

When we browse the page we get the blank screen with a textbox. As we write the text is written below the textbox.

output
See how easy it is to use Angular JS!! It reduces the lines of code to do stuff and is far more easy than JQUERY or any other javascript libraries.

Stay tuned for more posts on Angular JS.

 
Next Recommended Reading AngularJS (ng-model, ng-repeat)