AngularJS ng-model directive
ng-model instruction is used to bind application data to HTML value controller (input, select, textarea) of.
ng-model directive
ng-model
directive can enter variable values and AngularJS domain created bindings.
AngularJS examples
<Div ng-app = "myApp " ng-controller = "myCtrl">
Name: <input ng-model = " name">
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'myCtrl', function ($ scope) {
$ Scope.name = "John Doe";
});
</ Script>
Name: <input ng-model = " name">
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'myCtrl', function ($ scope) {
$ Scope.name = "John Doe";
});
</ Script>
try it"
Way binding
Two-way binding, when you modify the value of the input field, the value of the property will also be AngularJS Review:
AngularJS examples
<Div ng-app = "myApp " ng-controller = "myCtrl">
Name: <input ng-model = " name">
<H1> you enter: {{name}} </ h1>
</ Div>
Name: <input ng-model = " name">
<H1> you enter: {{name}} </ h1>
</ Div>
try it"
Validate user input
AngularJS examples
<Form ng-app = "" name = "myForm">
Email:
<Input type = "email" name = "myAddress" ng-model = "text">
<Span ng-show = "myForm.myAddress . $ Error.email"> is not a valid email address </ span>
</ Form>
Email:
<Input type = "email" name = "myAddress" ng-model = "text">
<Span ng-show = "myForm.myAddress . $ Error.email"> is not a valid email address </ span>
</ Form>
try it"
The above example, the message in the ng-show
property returns true
display case.
Application state
ng-model
directive provides status value (invalid, dirty, touched, error ) for the application data:
AngularJS examples
<Form ng-app = "" name = "myForm" ng-init = "myText = '[email protected]'">
Email:
<Input type = "email" name = "myAddress" ng-model = "myText" required> </ p>
<H1> Status </ h1>
{{myForm.myAddress. $ valid}}
{{myForm.myAddress. $ dirty}}
{{myForm.myAddress. $ touched}}
</ Form>
Email:
<Input type = "email" name = "myAddress" ng-model = "myText" required> </ p>
<H1> Status </ h1>
{{myForm.myAddress. $ valid}}
{{myForm.myAddress. $ dirty}}
{{myForm.myAddress. $ touched}}
</ Form>
try it"
CSS class
ng-model
instruction based on their states provide CSS classes for HTML elements:
AngularJS examples
<Style>
input.ng-invalid {
background-color: lightblue;
}
background-color: lightblue;
}
</ Style>
<Body>
<Form ng-app = "" name = "myForm">
Enter your name:
<Input name = "myAddress" ng -model = "text" required>
</ Form>
<Body>
<Form ng-app = "" name = "myForm">
Enter your name:
<Input name = "myAddress" ng -model = "text" required>
</ Form>
try it"
ng-model
instruction based on the state form field to add / remove the following categories:
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine