ホームページ >ウェブフロントエンド >jsチュートリアル >Angular.js の ng-app と ng-model の使用法を確認するためのヒント_AngularJS
Angular.js のindex.html の単純な構造:
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! </body> </html>
ng-app 属性 は、angular.js のスコープをマークする angular.js のフラグ ステートメントです。 ng-app は、上記の html タグへの追加のように、多くの場所に追加でき、Angular スクリプトがページ全体で動作することを示します。たとえば、ng-app 属性をローカルに追加することもできます。たとえば、特定の div 内に ng-app を追加すると、div 領域全体が angular スクリプトを使用して解析され、他の場所は angular スクリプトによって解析されなくなります。
ng-model は、データ モデルを構築することを意味します。ここでは、名前を入力する入力ボックスに、yourname データ モデルを定義します。モデルを定義したら、以下で {{}} を利用して呼び出すことができます。これでデータ バインディングが完了します。入力ボックスにコンテンツを入力すると、以下の Hello ステートメント ブロックに同期されます。
ng-model で定義されたデータ モデルは、上記のシナリオで使用できるだけでなく、さまざまな状況で広く使用できます。
1. 検索機能を実装するためのフィルターを設定します
次のコードでは、単純なデータ モデル定義とフィルターを使用してリスト検索関数を完成させます。 (これは中国のウェブサイトからのサンプルコードですので、不明な部分は最初から心配する必要はありません)
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> Search: <input ng-model="query"> </div> <div class="span10"> <ul class="phones"> <li ng-repeat="phone in phones | filter:query"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </div> </div> </div>
上記のコードでは、データ モデル クエリが検索ボックスの入力タグにバインドされています。このようにして、ユーザーが入力した情報はクエリ データ モデルと同期されます。次の li では、filter:query を使用してリストにデータ フィルタリング関数を実装し、ユーザーの入力情報に基づいてフィルタリングを実行できます。
2. orderBy を設定してリストの並べ替え関数を実装します
次のコードでは、filter と同じように、orderBy を使用してリストに並べ替え関数を追加します。
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>