Maison > Article > interface Web > Tutoriel de démarrage d'AngularJS - AngularJS Model_AngularJS

Tutoriel de démarrage d'AngularJS - AngularJS Model_AngularJS

WBOYoriginal: 2016-05-16 15:05:021304parcourir

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>

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>

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>

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>

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Organisation des notes d'étude jqGrid - partie avancée (1)_jqueryArticle suivant：Organisation des notes d'étude jqGrid - partie avancée (1)_jquery

Articles Liés

Voir plus