Maison > Article > interface Web > L'étude Angularjs note la liaison de données bidirectionnelle_AngularJS

L'étude Angularjs note la liaison de données bidirectionnelle_AngularJS

WBOYoriginal: 2016-05-16 15:38:061427parcourir

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, rendez-vous ici

L'effet obtenu ici est que lorsque vous saisissez du contenu dans la zone de saisie, 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 de ng-bind

Regardons un autre exemple, cliquez ici. Dans le premier exemple qui apparaît dans l'article, {{greeting.text}} et {{text}} sont une expression de valeur, mais si vous continuez à actualiser la page, vous trouvera un tel problème, c'est-à-dire que la chaîne "{{greeting.text}} {{text}}" apparaîtra parfois sur la page pendant un instant. Alors, 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 mettre

<p>{{greeting.text}} {{text}}</p>

Remplacer 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.

Mais 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, l'index utilise ng-bind et les modèles suivants utilisent la forme '{{}}'.

3. Scénarios typiques de liaison bidirectionnelle - formulaire

Regardez 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>
 <div class="panel panel-primary">
  <div class="panel-heading">
   <div class="panel-title">双向数据绑定</div>
  </div>
  <div class="panel-body">
   <div class="row">
    <div class="col-md-12">
     <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
      <div class="form-group">
       <label class="col-md-2 control-label">
        邮箱：
       </label>
       <div class="col-md-10">
        <input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email">
       </div>
      </div>
      <div class="form-group">
       <label class="col-md-2 control-label">
        密码：
       </label>
       <div class="col-md-10">
        <input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password">
       </div>
      </div>
      <div class="form-group">
       <div class="col-md-offset-2 col-md-10">
        <div class="checkbox">
         <label>
          <input type="checkbox" ng-model="userInfo.autoLogin">自动登录
         </label>
        </div>
       </div>
      </div>
      <div class="form-group">
       <div 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>
       </div>
      </div>
     </form>
    </div>
   </div>
  </div>
 </div>
</body>

</html>

Regardez à nouveau 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 capture d'écran de l'effet est la suivante :

Les fonctions implémentées dans l'image ci-dessus sont :

1. Cliquez sur "Obtenir" pour afficher trois données sur la console, l'e-mail, le mot de passe et le statut sélectionné (vrai, faux)

2. Cliquez sur « Paramètres » : vous pouvez modifier les valeursdes deux zones 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 en conséquence. 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'étiquette

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>
  <div ng-controller="CSSCtrl">
    <p class="text-{{color}}">测试CSS样式</p>
    <button class="btn btn-default" ng-click="setGreen()">绿色</button>
  </div>
</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 la classe. le nom est modifié, ce qui change également la couleur d’arrière-plan. 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 "red", il affiche donc en rouge lorsque vous cliquez dessus, la fonction est exécutée et devient verte.

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：JS implémente un menu vertical à trois niveaux avec des compétences d'imitation QQ effect_javascriptArticle suivant：JS implémente un menu vertical à trois niveaux avec des compétences d'imitation QQ effect_javascript

Articles Liés

Voir plus