angularjs 学習ノートの双方向データバインディング-jsチュートリアル-php.cn

angularjs 学習ノートの双方向データバインディング

高洛峰

リリース： 2016-12-24 10:07:26

オリジナル

1427 人が閲覧しました

今回はangularの双方向データバインディングについて詳しく解説していきます。

1. 簡単な例

この例は最初のセクションですでに示していますが、ここに移動してください

ここで得られる効果は、入力ボックスにコンテンツを入力すると、対応するコンテンツがそれに応じて変更されることです。。これにより、データの双方向のバインドが実現します。

2. 値式と ng-bind の使用

ここをクリックして別の例を見てみましょう。この記事にある最初の例では、{{greeting.text}} と {{text}} が 1 つの値です。つまり、文字列 "{{greeting.text}} {{text}}" がページに一瞬表示されることがあります。その場合は、次のようにする必要があります。それを解決するには？

ここでは ng-bind コマンドが使用されています: データ式をバインドするために使用されます。

たとえば、

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

ログイン後にコピー

を次のように変更できます。この修正後、ページが更新されたときに不要な文字列は表示されなくなります。

ただし、コマンドを使用するのは、式を直接使用するよりも常に効率が低いため、共通のルールをまとめました。一般的に、インデックスは ng-bind を使用し、後続のテンプレートは '{{}}' の形式を使用します。

3. 双方向バインディングの典型的なシナリオ - フォーム

まず、form.html の内容を確認します:

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

ログイン後にコピー

次に、Form.js の内容を確認します:

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

ログイン後にコピー

実装された関数上の図は次のとおりです:

1. [取得] をクリックすると、コンソールに電子メール、パスワード、選択されたステータス (true、false) の 3 つのデータを出力できます

2. [設定] をクリック: 値を変更できます2つの入力ボックスのチェックボックスを解除し、選択状態にします。

3.「リセット」をクリックすると、データを元のデータに戻すことができます。

入力ボックスのng-modelとコントローラーの値は双方向バインディングを実装しているため、入力ボックスの値を変更するか、コントローラーの値を変更すると、それに応じて双方の値が変更されます。たった数行のコードでこれほど強力な機能を実現できるなんて、すごいと思いませんか?確かにすごいですが、さらにすごいのはこれからです！続く！

4. ラベルのスタイルを動的に切り替える

まず color.html の内容を見てみましょう:

19 行目を見てみましょう: この p タグには "color" 変数があります。」をクリックし、setGreen関数を実行して「color」の値を「green」に変更するとクラス名が変更され、背景色も変更されます。この方法を使用すると、要素を直接操作する必要がなく、変数を追加するだけで済みます。コードは簡潔で直感的です。

color.jsの内容をもう一度見てみましょう:

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

ログイン後にコピー

属性「color」のデフォルト値は「red」なので赤が表示され、クリックすると関数が実行され、緑色に変わります。

その他の angularjs の学習ノートや双方向データバインディング関連の記事については、PHP 中国語 Web サイトに注目してください。