ホームページ > 記事 > ウェブフロントエンド > angularjs 学習ノートの双方向データ バインディング
angularjs 学習ノートの双方向データ バインディング
- 高洛峰オリジナル
- 2016-12-24 10:07:261360ブラウズ
今回はangularの双方向データバインディングについて詳しく解説していきます。
1. 簡単な例
この例は最初のセクションですでに示していますが、ここに移動してください
ここで得られる効果は、入力ボックスにコンテンツを入力すると、対応するコンテンツがそれに応じて変更されることです。 。これにより、データの双方向のバインドが実現します。
2. 値式と ng-bind の使用
ここをクリックして別の例を見てみましょう。この記事にある最初の例では、{{greeting.text}} と {{text}} が 1 つの値です。つまり、文字列 "{{greeting.text}} {{text}}" がページに一瞬表示されることがあります。その場合は、次のようにする必要があります。それを解決するには？
ここでは ng-bind コマンドが使用されています: データ式をバインドするために使用されます。
たとえば、
<p>{{greeting.text}} {{text}}</p>
を次のように変更できます。 この修正後、ページが更新されたときに不要な文字列は表示されなくなります。
ただし、コマンドを使用するのは、式を直接使用するよりも常に効率が低いため、共通のルールをまとめました。一般的に、インデックスは ng-bind を使用し、後続のテンプレートは '{{}}' の形式を使用します。
3. 双方向バインディングの典型的なシナリオ - フォーム
"<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 つのデータを出力できます
19 行目を見てみましょう: この p タグには "color" 変数があります。 」をクリックし、setGreen関数を実行して「color」の値を「green」に変更するとクラス名が変更され、背景色も変更されます。この方法を使用すると、要素を直接操作する必要がなく、変数を追加するだけで済みます。コードは簡潔で直感的です。
color.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
};
}
}
])
属性「color」のデフォルト値は「red」なので赤が表示され、クリックすると関数が実行され、緑色に変わります。
その他の angularjs の学習ノートや双方向データ バインディング関連の記事については、PHP 中国語 Web サイトに注目してください。