Related readings:
AngularJS Introductory Tutorial: AngularJS Expressions
AngularJS Introductory Tutorial: AngularJS Directive
In the previous tutorial on expressions and directives, it is learned that the AngularJS model (ng-model) can bind values in HTML input fields to variables created by AngularJS.
<!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="" ng-init="name='Jone Snow'">Name: <input ng-model="name"></div></body></html>
Bidirectional binding AngularJS bidirectional binding refers to the binding of ng-model to the input domain of HTML, and also to the attributes of AngularJS. Therefore, when the value of the input domain changes, the attribute values of AngularJS will also change.
<!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 entered: {{name}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.name = "John Snow";});</script><p>Modify the value of the input box, and the title name will also be modified accordingly. </p></body></html>The application status ng-model directive can provide status values for application data.
dirty When the data is modified, the status is TRUE, and it has not been modified to FALSE. Even if modified to the original value, it is TRUE.
valid The input value is TRUE when it is legal, and FALSE if it is not legal.
touched by touch screen clicking as TRUE, without touching as FALSE.
Apply CSS styles according to status
<!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><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></body></html>The input field adds the required state. When there is no input in the input field, the ng-model adds the ng-invalid style to the input field. Otherwise, remove the ng-invalid style. The ng-model directive adds/removes the following styles according to the status of the form field: - ng-empty - ng-not-empty - ng-touched - ng-untouched - ng-valid - ng-invalid - ng-dirty - ng-pending - ng-pristine Use ng-model to verify the mailbox format
<!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">is not a legal email address</span></form></body></html>
When the myForm.myAddress.$error.email attribute is TRUE (the mailbox format is incorrect), ng-show will control the display of the span content.
The above content is the AngularJS model introduced by the editor to you by the AngularJS introductory tutorial. I hope it will be helpful to everyone!