Of Stack

Detailed introduction of AngularJS model and example code

  • 2021-07-06 09:54:52
  • OfStack

AngularJS ng-model Directive

The ng-model instructions are used to bind application data to the values of the HTML controllers (input, select, textarea).

ng-model instruction

The ng-model directives bind the values of the input fields to variables created by AngularJS.

AngularJS instance 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<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>

<p> Use  ng-model  Directive to bind the value of the input field to the properties of the controller. </p>

</body>
</html>

Run results:

Name:

Use the ng-model instruction to bind the value of the input field to the properties of the controller.

Bidirectional binding

Bidirectional binding, when the value of the input field is modified, the value of the AngularJS property will also be modified:

AngularJS instance 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 Name : <input ng-model="name">
<h1> You typed in : {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

<p> Modify the value of the input box, and the name of the title will be modified accordingly. </p>

</body>
</html>

Run results:

Name:

You entered: John Doe

Modify the value of the input box, and the name of the title will be modified accordingly.

Validate user input

AngularJS Example 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<form ng-app="" name="myForm">
  Email:
  <input type="email" name="myAddress" ng-model="text">
  <span ng-show="myForm.myAddress.$error.email"> No 1 A valid email address </span>
</form>

<p> Enter your email address in the input box, if not 1 A valid email address will pop up a prompt message. </p>

</body>
</html>

Run results:

Email:

Enter your email address in the input box. If it is not a valid email address, a prompt will pop up.

CSS class

The ng-model instructions provide the CSS class for HTML elements based on their state:

AngularJS Example 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
<style>
input.ng-invalid {
  background-color: lightblue;
}
</style>
</head>
<body>

<form ng-app="" name="myForm">
   Enter your name :
  <input name="myName" ng-model="myText" required>
</form>

<p> Edit the text field, and the background color will change in different states. </p>
<p> The text field has been added  required  Property, which is required and is illegal if it is empty. </p>

</body>
</html>

Run results:

Enter your name:

Edit the text field, and the background color will change in different states.

The required attribute is added to the text field, which is required and is illegal if it is empty.

The ng-model directive adds/removes the following classes based on the state of the form field:

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

Related articles: