ホームページ > 記事 > ウェブフロントエンド > Angular.js の ng-app と ng-model の使用法を確認するためのヒント_AngularJS
Angular.js の ng-app と ng-model の使用法を確認するためのヒント_AngularJS
- WBOYオリジナル
- 2016-05-16 15:03:531578ブラウズ
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>