Angular データの双方向バインディングを理解する

ホームページ

ウェブフロントエンド

jsチュートリアル

Angular データの双方向バインディングを理解する_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

angular 双方向バインディングデータ

AngularJS は、多くの Google 製品で使用されている優れたフロントエンド JS フレームワークです。 AngularJS には多くの機能があり、その最も核となる機能は、MVVM、モジュール化、自動双方向データバインディング、セマンティックタグ、依存関係注入などです。

1. 双方向データバインディングとは
Angular は双方向のバインドメカニズムを実装しています。いわゆる双方向バインディングとは、インターフェース上の操作をリアルタイムにデータに反映でき、データの変化をリアルタイムにインターフェースに表示できるということに他なりません。

最も単純な例は次のとおりです:

<div ng-controller="CounterCtrl">
  <span ng-bind="counter"></span>
  <button ng-click="counter++">increase</button>
</div>function CounterCtrl($scope) {
  $scope.counter = 1;
}

ログイン後にコピー

この例は非常に単純で、ボタンをクリックするたびにインターフェイス上の数字が 1 つずつ増加します。

2. 双方向データバインディングの原則
1. 深い理解
ユーザーが携帯電話リストの表示順序を制御できるようにします。動的並べ替えは、新しいモデルプロパティを追加し、それをイテレータと統合し、残りの作業をデータバインディングに実行させることで実装できます。

テンプレート (app/index.html)

Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
 <option value="name">Alphabetical</option>
 <option value="age">Newest</option>
</select>


<ul class="phones">
 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
  {{phone.name}}
  <p>{{phone.snippet}}</p>
 </li>
</ul>

ログイン後にコピー

index.html に次の変更が加えられました:

まず、ユーザーが提供された 2 つの並べ替え方法から選択できるように、orderProp という