Angular.js の ng-app と ng-model の使用法を確認するためのヒント

ホームページ

ウェブフロントエンド

jsチュートリアル

Angular.js の ng-app と ng-model の使用法を確認するためのヒント_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:03 PM

angular.js

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>

ログイン後にコピー

上記は ng-app と ng-model の使用スキルに関するもので、過去を振り返り、新しいことを学ぶことで何かを得ることができれば幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。