AngularJS ng-model directive
The ng-model directive is used to bind application data to the value of HTML controller (input, select, textarea).
ng-model command
The ng-model directive binds the value of the input field to a variable 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 the ng-model directive to bind the value of the input domain to the controller's properties. </p></body></html>Running results:
name:Use the ng-model directive to bind the value of the input field to the controller's properties.
Two-way binding
Bidirectional binding, when modifying the value of the input field, 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 entered: {{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 title name will also be modified accordingly. </p></body></html>Running results:
name:
You entered: John Doe
Modify the value of the input box, and the title name will also be modified accordingly.
Verify user input
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><form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">Not a legal email address</span></form><p>Enter your email address in the input box. If it is not a legal email address, a prompt message will pop up. </p></body></html>
Running results:
Email:
Enter your email address in the input box. If it is not a legal email address, a prompt message will pop up.
CSS Class
The ng-model directive provides a CSS class for HTML elements based on their state:
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> <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 text fields, and the background colors of different states will be sent to change. </p><p>The required attribute is added to the text field, which is required, and is illegal if empty. </p></body></html>Running results:
Edit the text field, the background colors of different states will be sent to change.
The text field has added a required property, which is required, and is illegal if empty.
The ng-model directive adds/removes the following classes 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