Heim > Artikel > Web-Frontend > AngularJS-Studiennotizen zur bidirektionalen Datenbindung_AngularJS

AngularJS-Studiennotizen zur bidirektionalen Datenbindung_AngularJS

WBOYOriginal: 2016-05-16 15:38:061427Durchsuche

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, klicken Sie hier

Der hier erzielte Effekt besteht darin, dass bei der Eingabe von Inhalten in das Eingabefeld der entsprechende Inhalt entsprechend geändert wird. 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, sind {{greeting.text}} und {{text}} ein Wertausdruck, aber wenn Sie die Seite ständig aktualisieren, werden Sie angezeigt wird ein solches Problem finden, das heißt, die Zeichenfolge „{{greeting.text}} {{text}}“ erscheint manchmal für einen Moment auf der Seite. Wie sollen wir es also lösen?

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

Zum Beispiel können wir

setzen

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

Ändern zu:

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

Da die Verwendung von Befehlen jedoch immer weniger effizient ist als die direkte Verwendung von Ausdrücken, haben wir eine allgemeine Regel zusammengefasst: Im Allgemeinen verwendet der Index ng-bind und nachfolgende Vorlagen verwenden die Form „{{}}“.

3. Typische Szenarien der bidirektionalen Bindung – Formular

Schauen Sie sich 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>
 <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>

Schauen Sie sich den Inhalt von Form.js noch einmal an:

 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
    };
   }
  }
 ])

Der Screenshot des Effekts sieht wie folgt aus:

Die im obigen Bild implementierten Funktionen sind:

1. Klicken Sie auf „Get“, um drei Daten zur Konsole auszugeben: 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 entsprechend geändert. 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

Sehen Sie sich zuerst 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>
  <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>

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“ geändert, also die Klasse Der Name wird geändert, wodurch sich auch die Hintergrundfarbe ä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.

Schauen wir uns noch einmal den Inhalt von color.js an:

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

Der Standardwert des Attributs „Farbe“ ist „rot“, daher wird es rot angezeigt. Wenn darauf geklickt wird, wird die Funktion ausgeführt und wird grün.

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：JS implementiert ein dreistufiges vertikales Menü mit imitierten QQ-Effekt_Javascript-FähigkeitenNächster Artikel：JS implementiert ein dreistufiges vertikales Menü mit imitierten QQ-Effekt_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen