angular.jsのindex.htmlの単純な構造:
<!doctype html> <html ng-app> <head> <script src = "http://code.angularjs.org/angular-1.0.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1. </head>あなたの名前:<入力タイプ="テキスト "ng-model =" yourname " '世界'}}! </body> </html>
NG-APPプロパティは、Angular.jsのフラグステートメントであり、Angular.jsの範囲をマークします。 NG-APPは、上記のように多くの場所でHTMLタグに追加でき、Angularスクリプトがページ全体で機能することを示します。 NG-APP属性をローカルに追加することもできます。たとえば、特定のdivにng-appを追加すると、div領域全体が角度スクリプトを使用して解析され、角度スクリプトは他の場所では解析されません。
NG-Modelとは、データモデルを構築することを意味します。ここで、入力名の入力ボックスで、YourNameデータモデルを定義します。モデルを定義した後、{{}}を使用して以下に電話をかけることができます。これにより、データバインディングが完了します。入力ボックスにコンテンツを入力すると、下のHello Statementブロックに同期されます。
NG-Modelによって定義されたデータモデルは、上記のシナリオで使用できるだけでなく、多くの場合に広く使用できます。
1.検索機能を実現するためにフィルターを設定します
次のコードでは、シンプルなデータモデル定義 +フィルターを使用して、リスト検索関数を完了できます。 (これは中国のウェブサイトの例のコードなので、不明確にする必要はありません。)
<div> <div> <div>検索:<入力ng-model = "query"> </div> <div> <ul> <li ng-repeat = "電話の電話|フィルター:query"> {{phone.name}} <p> {{phone.snippet}}}}}}} </p>上記のコードでは、データモデルクエリは検索ボックスの入力タグにバインドされています。このようにして、ユーザーが入力した情報はクエリデータモデルに同期されます。次のLIでは、フィルターを使用して:クエリはリストにデータフィルタリング機能を実装し、ユーザーの入力情報に従ってフィルターを実装できます。
2. ORDERBYを設定して、リストソート機能を実装します
次のコードでは、フィルターなど、Orderbyを使用してリストにソート機能を追加します。
検索:<入力ng-model = "query"> sort by:<select ng-model = "orderprop"> <option value = "name"> alphabetical </option> <option value = "age"> newest </option> <ul> <li ng-repeat = "電話|フィルター| Query | Ordery:name {{{{{{{{{{= oder.name} <p> {{phone.snippet}} </p> </li> </ul>上記は、NG-APPおよびNG-Modelを使用する技術に関するものです。古いものをレビューし、新しいことを学びます。誰もがそれから何かを得ることができることを願っています。