angularjs ng-model directive
The ng-model directive is used to bind application data to the values of the html controller (input, select, textarea).
ng-model directive
The ng-model directive can bind the value of the input field to a variable created by angularjs.
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">
</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 property of the controller.
</p>
</body>
</html>
operation result:
Use the ng-model directive to bind the value of the input field to the property of the controller.
Two-way binding
Two-way binding,When modifying the value of an input field, 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,The title name will be changed accordingly.
</p>
</body>
</html>
operation result:
Name:
You entered:john doe
Modify the value of the input box,The title name will be changed 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">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 text field,The background color of different states will send changes.
</p>
The<p>text field adds the required attribute, which is required,If it is empty, it is illegal.
</p>
</body>
</html>
operation result:
Edit text field,The background color of different states will send changes.
The text field adds the required attribute, which 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
Related articles
- Introduction to AngularJS HTML compiler
- AngularJS execution process in detail
- About the Scope of the angularJs directive
- AngularJS Bootstrap detailed introduction and example code
- Contains detailed introduction and implementation examples in AngularJS
- 3 AngularJS instructions that can improve the user experience
- A brief introduction to AngularJS basic study notes
- Promise in AngularJS detailed introduction and example code
- Introduction to usage examples of ng-repeat-start and ng-repeat-end in Angularjs
- General introduction to AngularJs daily learning
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- python - you may need to restart the kernel to use updated packages error
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- python 3x - typeerror: 'method' object is not subscriptable
- javascript - how to check if an element exists in puppeteer
- xcode - pod install [!] no `podfile 'found in the project directory
- i want to call a child component method from a parent in vuejs
- vuejs - [vuetify] unable to locate target [data-app] i want to unit test to avoid warning