Cette fois, nous expliquerons en détail la liaison de données bidirectionnelle d'Angular.
1. Exemple simple
Nous avons déjà montré cet exemple dans la première section Pour le voir, déplacez-vous ici
L'effet obtenu ici est celui dans la zone de saisie Entrée. le contenu, et le contenu correspondant sera modifié en conséquence. Cela permet d'obtenir une liaison bidirectionnelle des données.
2. Utilisation d'expressions de valeur et ng-bind
Regardons un autre exemple, cliquez ici Dans le premier exemple qui apparaît dans l'article, {{greeting.text}} et {. {text}} est une expression de valeur, mais si vous continuez à actualiser la page, vous rencontrerez un problème, c'est-à-dire que la page apparaîtra parfois "{{greeting.text}} {{text}}" "Cette chaîne, comment devrions-nous le résoudre?
La commande ng-bind est utilisée ici : utilisée pour lier des expressions de données.
Par exemple, on peut changer
<p>{{greeting.text}} {{text}}</p>
par :
"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>";
Après cette correction, la chaîne indésirable n'apparaîtra pas lors du rafraîchissement de la page.
Cependant, utiliser des commandes est toujours moins efficace que d'utiliser des expressions directement, nous avons donc résumé une règle commune : de manière générale, utilisez ng-bind pour l'index et utilisez '{{}}' dans les modèles suivants. .
3. Scénario typique de liaison bidirectionnelle - formulaire
Regardons d'abord le contenu de form.html :
<!doctype html>
<html ng-app="UserInfoModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
<script src="js/angular-1.3.0.js"></script>
<script src="Form.js"></script>
</head>
<body>
<p class="panel panel-primary">
<p class="panel-heading">
<p class="panel-title">双向数据绑定</p>
</p>
<p class="panel-body">
<p class="row">
<p class="col-md-12">
<form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
<p class="form-group">
<label class="col-md-2 control-label">
邮箱：
</label>
<p class="col-md-10">
<input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email">
</p>
</p>
<p class="form-group">
<label class="col-md-2 control-label">
密码：
</label>
<p class="col-md-10">
<input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password">
</p>
</p>
<p class="form-group">
<p class="col-md-offset-2 col-md-10">
<p class="checkbox">
<label>
<input type="checkbox" ng-model="userInfo.autoLogin">自动登录
</label>
</p>
</p>
</p>
<p class="form-group">
<p class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button>
<button class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button>
<button class="btn btn-default" ng-click="resetForm()">重置表单</button>
</p>
</p>
</form>
</p>
</p>
</p>
</p>
</body>
</html>
Regardez le contenu de Form.js :
var userInfoModule = angular.module('UserInfoModule', []);
userInfoModule.controller('UserInfoCtrl', ['$scope',
function($scope) {
$scope.userInfo = {
email: "253445528@qq.com",
password: "253445528",
autoLogin: true
};
$scope.getFormData = function() {
console.log($scope.userInfo);
};
$scope.setFormData = function() {
$scope.userInfo = {
email: 'testtest@126.com',
password: 'testtest',
autoLogin: false
}
};
$scope.resetForm = function() {
$scope.userInfo = {
email: "253445528@qq.com",
password: "253445528",
autoLogin: true
};
}
}
])La fonction implémentée dans l'image ci-dessus est :
1. Cliquez sur "Obtenir" pour afficher trois données sur la console, email, mot de passe et statut sélectionné (vrai, faux)
2. Cliquez sur "Paramètres" : vous pouvez modifier les valeurs des deux cases de saisie et l'état non coché de la case à cocher ;
3. Cliquez sur « Réinitialiser » : vous pouvez restaurer les données aux données d'origine.
Étant donné que le modèle ng dans la zone de saisie et la valeur dans le contrôleur implémentent une liaison bidirectionnelle, modifier la valeur de la zone de saisie ou modifier la valeur dans le contrôleur modifiera les valeurs des deux parties. par conséquent. Quelques lignes de code seulement peuvent réaliser une fonction aussi puissante. Ne trouvez-vous pas que c'est incroyable ? C’est effectivement incroyable, mais ce qui est encore plus étonnant est à venir ! Poursuivre!
4. Changer dynamiquement les styles d'étiquettes
Regardez d'abord le contenu de color.html :
<!doctype html>
<html ng-app="MyCSSModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS1.css">
</head>
<style type="text/css">
.text-red {
background-color: #ff0000;
}
.text-green {
background-color: #00ff00;
}
</style>
<body>
<p ng-controller="CSSCtrl">
<p class="text-{{color}}">测试CSS样式</p>
<button class="btn btn-default" ng-click="setGreen()">绿色</button>
</p>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="color.js"></script>
</html>
Regardons la ligne 19 : Il y a une variable "color" dans la balise p Lorsque l'on clique sur "green", la fonction setGreen est exécutée et la valeur de "color" est changée en "green", donc le nom de la classe. est modifié, donc la couleur d'arrière-plan a été modifiée. En utilisant cette méthode, nous n'avons pas besoin de manipuler directement les éléments, mais simplement d'ajouter une variable. Le code est concis et intuitif.
Regardons à nouveau le contenu de color.js :
var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
function($scope) {
$scope.color = "red";
$scope.setGreen = function() {
$scope.color = "green";
}
}
])
La valeur par défaut de l'attribut " color" est "rouge" », il affiche donc du rouge, et lorsque vous cliquez dessus, la fonction est exécutée et devient verte.
Pour plus de notes d'étude sur Angularjs et d'articles sur la liaison de données bidirectionnelle, veuillez prêter attention au site Web PHP chinois !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
