AngularJS model detailed introduction and example code

Home>2020-03-10 14:42

AngularJS model detailed introduction and example code

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:

Name:

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

javascript

Previous Summary of methods for obtaining various height, width and position of web pages in JS

Next Deep understanding of Python decorators

Trends

TutorialFor

AngularJS model detailed introduction and example code

Related articles