Tutorial 5 - ng-model in AngularJS

Tutorial 5 - ng-model in AngularJS
Ng-model is directive in AngularJS, used to link data between server and client throught controller.
How to define an ng-model in HTML?
You can add ng-model directive to a HTML tag
Example:
<input ng-model="val" class="my-input" />

Full HTML sample for ng-model.


   
 <html>  
   <head>  
     <title>Angular JS Model</title>  
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
     <script>  
       angular.module('MyForm', [])  
           .controller('myController', ['$scope', function($scope) {  
       }]);  
     </script>  
     <style>  
       .my-input {  
         -webkit-transition:all linear 0.5s;  
         transition:all linear 0.5s;  
         background: transparent;  
       }  
     </style>  
   </head>  
   <body ng-app="MyForm">  
     <form name="myForm" ng-controller="'myController'">  
       <input ng-model="val" name="yourname" class="my-input" />  
       <p>{{val}}</p>  
     </form>  
   </body>  
 </html>  
   
   


No comments:

Post a Comment

Popular Posts