AngularJS Model

1.What is ng-model directive?

By using ng-model directive we can bind the value of an input field, select and text area to a variable created in angular Js.

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller ="myController">
 Name: <input ng-model="name">
</div>

<script>
var myFirstApp= angular.module('myFirstApp', []);
myFirstApp. controller(' myController ', function($scope){
$scope.name= "Ebc Learn";
});
</script>
</body>
</html>

 

2.What is two-way binding?

Two-way binding means if you change the value inside the input box the property values also change.

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller=' myController '>
Full name:<input ng-model="fullname">
<h3>Entered name in text field:{{fullname}}</h3>
</div>

<script>
var myFirstApp=angular.module('myFirstApp', []);
myFirstApp.controller('myController',function($scope){
$scope.fullname="Ebc Learn";
});
</script>
<p>Type anything in input box the same 
content will display in the header</p>
</body>
</html>

 

3.How to validate user input?

By using ng-model directive we can validate input fields like Email ,phone number, etc..

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<form ng-app="" name="myFirstForm">Email 
<input type="email" name="myemail" ng-model="text">
<span ng-show="myFirstForm.myemail.$error.
email">Not a valid email
</form>
</body>
</html>