Related reading:
The ANGULARJS expression of the Angularjs introductory tutorial
ANGULARJS instructions for the ANGULARJS introductory tutorial
The ANGULARJS model (Ng-model) can bind values in HTML input fields to variables created by Angularjs in the tutorials of previous expressions and directives.
<! 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, refers to the Ng-model and HTML input domain binding, but also with the Angularjs property binding, so when the value of the input field changes, Angularjs property values 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 be changed accordingly. </ p>
</ body>
</ html>
Applying state Ng-model directives can provide status values for application data
Dirty The state is true when the data is modified and is not modified to false. True even if it is modified to the original value.
Valid is true when the input value is valid, False if it is illegal.
Touched clicks to true via touch screen, no click to 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 a required state, and Ng-model adds a ng-invalid style to the input field when input fields are not entered. Conversely, the ng-invalid style is deleted. The Ng-model directive adds/removes the following styles based on the state of the form field:-Ng-empty-ng-not-empty-ng-touched-ng-untouched-ng-valid-ng-invalid-ng-dirty-n G-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 valid email address </ span> </ form> </ body> </ html>
Myform.myaddress. $error. When the Email property is True (the mailbox is malformed), Ng-show controls the contents of the span display.
The above content is a small series to introduce the ANGULARJS introductory tutorial Angularjs model, I hope to help you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
