suchen

Heim  >  Artikel  >  Web-Frontend  >  Bidirektionale Datenbindung von AngularJS-Studiennotizen

Bidirektionale Datenbindung von AngularJS-Studiennotizen

高洛峰
高洛峰Original
2016-12-24 10:07:261412Durchsuche

Dieses Mal werden wir die bidirektionale Datenbindung von Angular ausführlich erläutern.

1. Einfaches Beispiel

Dieses Beispiel haben wir bereits im ersten Abschnitt gezeigt. Um es zu sehen, gehen Sie hierher

Der hier erzielte Effekt ist, dass im Eingabefeld Enter der Inhalt, und der entsprechende Inhalt wird entsprechend geändert. Dadurch wird eine bidirektionale Datenbindung erreicht.

2. Verwendung von Wertausdrücken und ng-bind

Schauen wir uns ein weiteres Beispiel an. Klicken Sie hier. Im ersten Beispiel, das im Artikel erscheint, {{greeting.text}} {text}} ist ein Wertausdruck, aber wenn Sie die Seite ständig aktualisieren, werden Sie auf ein solches Problem stoßen, das heißt, auf der Seite erscheint manchmal „{{greeting.text}} {{text}}“ „Diese Zeichenfolge, Wie sollen wir es lösen?

Hier wird der Befehl ng-bind verwendet: zum Binden von Datenausdrücken.

Zum Beispiel können wir 

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


ändern in: 

"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>";


Nach dieser Korrektur wird die unerwünschte Zeichenfolge nicht angezeigt, wenn die Seite aktualisiert wird.

Allerdings ist die Verwendung von Befehlen immer weniger effizient als die direkte Verwendung von Ausdrücken, daher haben wir eine allgemeine Regel zusammengefasst: Verwenden Sie im Allgemeinen ng-bind für den Index und verwenden Sie „{{}}“ in nachfolgenden Vorlagen .

3. Typisches Szenario der bidirektionalen Bindung - Formular

Schauen wir uns zunächst den Inhalt von form.html an: 

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


Sehen Sie sich den Inhalt von Form.js an: 

var userInfoModule = angular.module(&#39;UserInfoModule&#39;, []);
userInfoModule.controller(&#39;UserInfoCtrl&#39;, [&#39;$scope&#39;,
 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: &#39;testtest@126.com&#39;,
    password: &#39;testtest&#39;,
    autoLogin: false
   }
  };
  $scope.resetForm = function() {
   $scope.userInfo = {
    email: "253445528@qq.com",
    password: "253445528",
    autoLogin: true
   };
  }
 }
])

Die im obigen Bild implementierte Funktion lautet:

1. Klicken Sie auf „Get“, um drei auszugeben Daten zur Konsole, E-Mail, Passwort und ausgewählter Status (wahr, falsch)

2. Klicken Sie auf „Einstellungen“: Sie können die Werte der beiden Eingabefelder und den deaktivierten Status des Kontrollkästchens ändern;

3. Klicken Sie auf „Zurücksetzen“: Sie können die Daten auf die Originaldaten zurücksetzen.

Da das ng-Modell im Eingabefeld und der Wert im Controller eine bidirektionale Bindung implementieren, werden durch Ändern des Werts im Eingabefeld oder im Controller die Werte beider Parteien geändert entsprechend. Mit nur wenigen Codezeilen kann eine so leistungsstarke Funktion erreicht werden. Finden Sie das nicht erstaunlich? Es ist in der Tat erstaunlich, aber was noch Erstaunlicheres kommt, kommt noch! Fortfahren!

4. Etikettenstile dynamisch wechseln

Schauen Sie sich zunächst den Inhalt von color.html an: 

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


Schauen wir uns Zeile 19 an: Im p-Tag gibt es eine „color“-Variable. Wenn auf „green“ geklickt wird, wird die setGreen-Funktion ausgeführt und der Wert von „color“ in „green“, also den Klassennamen, geändert wird geändert, also die Hintergrundfarbe geändert. Bei dieser Methode müssen wir die Elemente nicht direkt manipulieren, sondern fügen einfach eine Variable hinzu. Der Code ist prägnant und intuitiv.

Werfen wir noch einmal einen Blick auf den Inhalt von color.js: 

var myCSSModule = angular.module(&#39;MyCSSModule&#39;, []);
myCSSModule.controller(&#39;CSSCtrl&#39;, [&#39;$scope&#39;,
  function($scope) {
    $scope.color = "red";
    $scope.setGreen = function() {
      $scope.color = "green";
    }
  }
])


Der Standardwert des Attributs „color „ist „rot““, wird also rot angezeigt, und wenn darauf geklickt wird, wird die Funktion ausgeführt und wird grün.

Weitere Studiennotizen zu AngularJS und Artikel zum Thema bidirektionale Datenbindung finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Datenbindungsprinzipien im AngularJS-Einführungs-TutorialNächster Artikel：Ausführliche Erläuterung der Datenbindungsprinzipien im AngularJS-Einführungs-Tutorial

In Verbindung stehende Artikel

Mehr sehen