AngularJS ng-model Directive
AngulaJS ng-model Directive bind data with HTML control.HTML control (input,select , textarea) bind with application data by ng-model directive .
You can bind HTML data with a variable also.
Example(Simple example of variable and HTML control data bind)
ng-bing is two way binding .Change in one part of binding (HTMl/Variable) will reflect other part of the binding.
Example( A simple example of two way binding ,Change in one control will reflect the other , with which ,the control is bond with)
AngulaJS has a number of inbuilt directive to validate user data.
ng-model support validation directive to validate data.For example ,you can validate a input ,it is a number format or not.
Example (A simple of validation , if all input are valid,the form will be valid else invalid
AngulaJS also support input data status directive. An input may be of many status , AngularJS inbuilt directive able to check it.Here are the list of status directive.
AngulaJS support CSS for decorating purpose.You can decorate output with CSS class.ng-model also support CSS.
Example ( A Simple example of an input was touched or not)
AngulaJS ng-model Directive bind data with HTML control.HTML control (input,select , textarea) bind with application data by ng-model directive .
You can bind HTML data with a variable also.
Example(Simple example of variable and HTML control data bind)
<!DOCTYPE
>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var
app = angular.module("myApp",
[]);
app.controller('myController',
['$scope',
function
($scope)
{
$scope.name
= 'John';
$scope.Age
= 12;
$scope.Address
= 'Kolkata';
}
]);
</script>
<div
ng-app="myApp">
<div
ng-controller="myController">
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
ng-model="name"
/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="Age"
/>
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="Address"
/>
</td>
</tr>
</table>
</div>
</div>
Output :
ng-bing is two way binding .Change in one part of binding (HTMl/Variable) will reflect other part of the binding.
Example( A simple example of two way binding ,Change in one control will reflect the other , with which ,the control is bond with)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
mypartone = angular.module("myApp",
[]).controller("myController",
function($scope)
{
var
students = {
Name:
"Student1",
Age:
12,
Address:
"kolkata",
};
$scope.student
= students;
});
</script>
<div
ng-app="myApp">
<div
ng-controller="myController">
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
ng-model="student.Name"
/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="student.Age"
/>
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="student.Address"
/>
</td>
</tr>
</table>
<br
/>
<br
/>
<br
/>
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
ng-model="student.Name"
/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="student.Age"
/>
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="student.Address"
/>
</td>
</tr>
</table>
</div>
Output :
AngulaJS has a number of inbuilt directive to validate user data.
ng-model support validation directive to validate data.For example ,you can validate a input ,it is a number format or not.
Example (A simple of validation , if all input are valid,the form will be valid else invalid
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<div
ng-app="">
<ng-form
name="myForm"
novalidate>
Name
:<input
type="text"
name="uname"
required
ng-model="user.uname"><br
/>
Age
:<input
type="text"
name="age"
required
ng-model="user.age"><br
/>
Address
:<input
type="text"
name="address"
required
ng-model="user.address"><br
/>
</ng-form>
<pre>myForm.$valid:<b>{{myForm.$valid}}</b></pre>
</div>
Example (Example of form validation)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<div
ng-app="">
<ng-form
name="myForm"
novalidate>
<table><tr><td>
Name
:<input
type="text"
name="uname"
required
ng-model="user.uname"><br
/>
<span
style="color:red"
ng-show="myForm.uname.$error.required
&& myForm.uname.$dirty">Student
Name is required</span>
</td></tr>
<tr><td>
Age
:<input
type="text"
name="age"
required
ng-model="user.age"><br
/>
<span
style="color:red"
ng-show="myForm.age.$error.required
&& myForm.age.$dirty">Student
Age is required</span>
</td></tr>
<tr><td>
Address
:<input
type="text"
name="address"
required
ng-model="user.address"><br
/>
<span
style="color:red"
ng-show="myForm.address.$error.required
&& myForm.address.$dirty">Student
Address is required</span>
</td></tr>
<tr><td>
Email
:<input
type="text"
name="Email"
required
ng-model="user.Email"><br
/>
<span
style="color:red"
ng-show="myForm.Email.$error.required
&& myForm.Email.$dirty">Student
Email is required</span>
</td></tr>
</table>
</ng-form>
<pre>myForm.$valid:<b>{{myForm.$valid}}</b></pre>
</div>
Output :
- ng-untouched : The input not touched till now.
- ng-touched : The input was touched.
- ng-pristine : The input is not modified yet.
- ng-dirty : The input was modified.
- ng-valid : The input data is valid.
- ng-invalid : The input data is not valid.
AngulaJS support CSS for decorating purpose.You can decorate output with CSS class.ng-model also support CSS.
Example ( A Simple example of an input was touched or not)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<div
ng-app="">
<ng-form
name="myForm"
novalidate>
Name
:<input
type="text"
name="uname"
required
ng-model="user.uname"><br
/>
<span>Input
Was touched :<b>{{myForm.uname.$touched
}}</span>
</ng-form>
</div>
Ouput :
Example (Example of text,number,email,date validation)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<div
ng-app="">
<ng-form
name="myForm"
>
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
name="uname"
required
ng-model="user.uname"><br
/>
<span
style="color:red"
ng-show="myForm.uname.$error.required
&& myForm.uname.$dirty">Student
Name is required</span>
</td>
</tr>
<tr>
<td>
Mobile
:
</td>
<td>
<input
type="number"
name="mobile"
required
ng-model="user.mobile">
<span
style="color:red"
ng-show="myForm.mobile.$error.required
&& myForm.mobile.$dirty">Mobile
number is required</span>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input
type="email"
name="email"
required
ng-model="user.email">
<span
style="color:red"
ng-show="myForm.email.$error.required
&& myForm.email.$dirty">Mobile
number is required</span>
</td>
</tr>
<tr>
<td>
Date
of Birth
</td>
<td>
<input
type="date"
name="date"
required
ng-model="user.date"><td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</ng-form>
</div>
Output :
great post. thank you for sharing this..
ReplyDeletebig data training in chennai
great article.. keep sharing... http://www.softlogicsys.in/angularjs-training-center-in-chennai
ReplyDeletenice post...best angularjs training in chennai
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteNice one.. keep sharing.. hardware and networking training in chennai | angularjs training in chennai
ReplyDeleteIts awesome post.its so informative..keep sharing.
ReplyDeleteBest Javascript training in Chennai | Best PHP training in Chennai
Its awesome post...thanking you for sharing..
ReplyDeleteTally training course in chennai
| GST training in chennai | Best Spoken English classes in chennai
I have crossed, lot of water level controllers, but i can suggest Twinvolt automatic Water level indicator in Chennai | water alarm services in chennai
ReplyDeleteBig thumbs up for making such a wonderful blog with great content.
ReplyDeletecatalogue printing in Chennai | business cards printing press in chennai | Brochure printing company in chennai
Thank you for your Post. Nice Blog
ReplyDeleteTop automatic water controller in chennai | water level controller service in chennai
I really like your website and got a great experience here. Thanks a lot......
ReplyDeleteGST training in chennai |
Tally Gst Training in chennai |
Spoken english training in chennai
This technical post helps me to improve my skills set, thanks for this wonder article I expect your upcoming blog, so keep sharing. Automatic water level controller in coimbatore | Automatic Water Motor Controller coimbatore
ReplyDeleteAnd indeed, I’m just always astounded concerning the remarkable things served by you. Some four facts on this page are undeniably the most effective I’ve had.
ReplyDeleteData science Course Training in Chennai |Best Data Science Training Institute in Chennai
RPA Course Training in Chennai |Best RPA Training Institute in Chennai
AWS Course Training in Chennai |Best AWS Training Institute in Chennai
Devops Course Training in Chennai |Best Devops Training Institute in Chennai
Selenium Course Training in Chennai |Best Selenium Training Institute in Chennai
Java Course Training in Chennai | Best Java Training Institute in Chennai