Home > Article > Web Front-end > AngularJS Getting Started Tutorial - AngularJS Model_AngularJS

AngularJS Getting Started Tutorial - AngularJS Model_AngularJS

WBOYOriginal: 2016-05-16 15:05:021304browse

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>

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>

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jqGrid study note organization - advanced part (1)_jqueryNext article：jqGrid study note organization - advanced part (1)_jquery

See more

AngularJS Getting Started Tutorial - AngularJS Model_AngularJS

Related articles