Tutoriel de démarrage d'AngularJS - AngularJS Model

Tutoriel de démarrage d'AngularJS - AngularJS Model_AngularJS

WBOY

Libérer： 2016-05-16 15:05:02

original

1250 Les gens l'ont consulté

Lecture connexe :

Tutoriel d'introduction à AngularJS - Expressions AngularJS

Tutoriel d'introduction à AngularJS : commandes AngularJS

Comme vous l'avez appris dans le tutoriel précédent sur les expressions et les directives, le modèle AngularJS (ng-model) peut lier la valeur du champ de saisie HTML aux variables créées par 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>

Copier après la connexion

Liaison bidirectionnelle La liaison bidirectionnelle d'AngularJS signifie que ng-model est lié au champ de saisie HTML et est également lié aux attributs d'AngularJS. Par conséquent, lorsque la valeur du champ de saisie change, l'attribut. la valeur d'AngularJS changera également.

<!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>

Copier après la connexion

La directive ng-model d'état d'application peut fournir des valeurs d'état pour les données d'application

dirty Le statut est TRUE lorsque les données sont modifiées, et FALSE lorsque les données n'ont pas été modifiées. Même s'il est modifié à la valeur d'origine, il est VRAI.

valid est TRUE lorsque la valeur d'entrée est légale, et FALSE lorsqu'elle est illégale.

touched est VRAI si vous cliquez sur l'écran tactile, et FAUX s'il n'y a pas de clic.

Appliquer les styles CSS en fonction de l'état

<!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>

Copier après la connexion

Le champ de saisie ajoute l'état requis Lorsqu'il n'y a aucune entrée dans le champ de saisie, ng-model ajoute le style ng-invalid au champ de saisie. Sinon, supprimez le style ng-invalid. La directive ng-model ajoute/supprime les styles suivants en fonction de l'état du champ du formulaire : - ng-empty - ng-not-empty - ng-touched - ng-untouched - ng-valid - ng-invalid - ng-dirty - ng-ending - ng-pristine utilise ng-model pour vérifier le format de l'e-mail

<!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>

Copier après la connexion

Lorsque l'attribut myForm.myAddress.$error.email est TRUE (le format de l'e-mail est incorrect), ng-show contrôlera le contenu span à afficher.

Le contenu ci-dessus est le modèle AngularJS du tutoriel d'introduction à AngularJS présenté par l'éditeur. J'espère qu'il sera utile à tout le monde !