Latest web development tutorials

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>

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>

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>

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 = 'test@w3big.com'">
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;
}
</ Style>
<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