angularjs 研究ノート双方向データバインディング

angularjs 研究ノート双方向データバインディング_AngularJS

WBOY

リリース： 2016-05-16 15:38:06

オリジナル

1457 人が閲覧しました

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

1. 簡単な例

この例は最初のセクションですでに示しています。確認するには、ここにアクセスしてください。

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

2. 値式と ng-bind の使用

別の例を見てみましょう。ここをクリックしてください。記事にある最初の例では、{{greeting.text}} と {{text}} は値式ですが、ページを更新し続けると、つまり、ページ上に「{{greeting.text}} {{text}}」という文字列が一瞬表示されることがあります。では、どのように解決すればよいでしょうか。

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

たとえば、

と置くことができます。

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

ログイン後にコピー

次のように変更します:

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

ログイン後にコピー

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

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

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

まず、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>

ログイン後にコピー

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

ログイン後にコピー

エフェクトのスクリーンショットは次のとおりです:

上の図に実装されている関数は次のとおりです:

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

2. [設定] をクリックします: 2 つの入力ボックスの値とチェックボックスのオフの状態を変更できます

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

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

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

まず 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>

ログイン後にコピー

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

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

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

ログイン後にコピー

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