Angularjs Ng-model Instruction
The Ng-model directive is used to bind application data to the value of the HTML controller (input, select, textarea).
Ng-model directives
The Ng-model directive can bind the value of an 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 field to the properties of the controller. </ p>
</ body>
</ html>
operation result:
first name:
John Doe
Use the ng-model directive to bind the value of the input field to the properties of the controller.
Two-way binding
Two-way binding, when the value of the input field is modified, the value of the AngularJS property will also be modified:
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>
<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 be modified accordingly. </ p>
</ body>
</ html>
operation result:
first name:
John Doe
You type: John Doe
Modify the value of the input box, the title of the title will be modified accordingly.
Verify 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"> is not a valid email address </ span>
</ form>
<p> Enter your email address in the input box. If it is not a valid email address, a prompt message will pop up. </ p>
</ body>
</ html>
operation result:
Email:
Enter your email address in the input box. If it is not a valid email address, a prompt message will pop up.
CSS class
The ng-model directive provides CSS classes 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, the background color will be changed in different states. </ p>
<p> The required attribute is added to the text field. This value is required. If it is empty, it is illegal. </ p>
</ body>
</ html>
operation result:
Enter your name:
Edit the text field, the background color will be changed in different states.
The required attribute is added to the text field. This value is required. If it is empty, it is illegal.
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
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
