AngularJS Getting Started Tutorial - AngularJS Model

AngularJS Getting Started Tutorial - AngularJS Model_AngularJS

WBOY

Release： 2016-05-16 15:05:02

Original

1292 people have browsed it

AngularJS Introductory Tutorial: AngularJS Commands

As you learned in the previous tutorial on expressions and directives, the AngularJS model (ng-model) can bind the value in the HTML input field to the variables created by AngularJS.

<!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'">
名字: <input ng-model="name">
</div>
</body>
</html>

Copy after login

Two-way binding The two-way binding of AngularJS means that ng-model is bound to the input field of HTML and is also bound to the attributes of AngularJS. Therefore, when the value of the input field changes, the attribute value of AngularJS 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">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Snow";
});
</script>
<p>修改输入框的值，标题的名字也会相应修改。</p>
</body>
</html>

Copy after login

The application state ng-model directive can provide state values for application data

dirty The status is TRUE when the data is modified, and FALSE when the data has not been modified. Even if it is modified to the original value, it is TRUE.

valid is TRUE when the input value is legal, and FALSE when it is illegal.

touched is TRUE if clicked on the touch screen, and FALSE if there is no click.

Apply CSS styles based on state

<!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">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
</body>
</html>

Copy after login

The input field adds the required state. When there is no input in the input field, ng-model adds the ng-invalid style to the input field. Otherwise, delete the ng-invalid style. 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 - ng-pending - ng-pristine uses ng-model to verify email 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">不是一个合法的邮箱地址</span>
</form>
</body>
</html>

Copy after login

When the myForm.myAddress.$error.email attribute is TRUE (the email format is incorrect), ng-show will control the span content to be displayed.

The above content is the AngularJS model of the AngularJS introductory tutorial introduced by the editor. I hope it will be helpful to everyone!