Angular.js回顧+学習ノート(1)【ng-appとng-model】
2311 ワード
Angular.js中index.html単純構造:
ng-app属性はangular.jsのフラグ文はangularをマークしています.jsの役割ドメイン.ng-appは多くの場所に追加することができ、上のようにhtmlラベルに追加することができ、angularスクリプトがページ全体に役立つことを示しています.ng-appプロパティをローカルに追加することもできます.たとえば、あるdivにng-appを追加すると、次のdiv領域全体がangularスクリプト解析を使用していることを示しますが、他の場所ではangularスクリプト解析は適用されません.
ng-modelはデータモデルを構築することを表す.ここではinput入力名の入力ボックスで、yournameデータモデルを定義します.このモデルを定義すると,{}}を用いて呼び出すことができる.これでデータバインドが完了し、入力ボックスに内容を入力すると、次のHello文ブロックに同期します.
ng-model定義のデータモデルは、上述したシーンだけでなく、多くの場合に広く応用されている.
1、filterを設定し、検索機能を実現する
次のコードでは、簡単なデータモデル定義+filterを使用してリスト検索機能を完了します.(これは中国語のネット上のインスタンスコードで、まずはっきりしない部分を管理する必要はありません)
上記のコードでは、検索ボックスのinputラベルにデータモデルqueryをバインドします.これにより、ユーザが入力した情報がqueryデータモデルに同期されます.以下のliではfilter:queryを用いてリスト内のデータフィルタリング機能を実現し,ユーザの入力情報に従ってfilterフィルタリングを行う.
2、orderByを設定し、リスト並べ替え機能を実現する
次のコードでは、filterと同様にorderByを使用してリストにソート機能を追加します.
<!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はデータモデルを構築することを表す.ここではinput入力名の入力ボックスで、yournameデータモデルを定義します.このモデルを定義すると,{}}を用いて呼び出すことができる.これでデータバインドが完了し、入力ボックスに内容を入力すると、次のHello文ブロックに同期します.
ng-model定義のデータモデルは、上述したシーンだけでなく、多くの場合に広く応用されている.
1、filterを設定し、検索機能を実現する
次のコードでは、簡単なデータモデル定義+filterを使用してリスト検索機能を完了します.(これは中国語のネット上のインスタンスコードで、まずはっきりしない部分を管理する必要はありません)
<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>
上記のコードでは、検索ボックスのinputラベルにデータモデルqueryをバインドします.これにより、ユーザが入力した情報がqueryデータモデルに同期されます.以下のliではfilter:queryを用いてリスト内のデータフィルタリング機能を実現し,ユーザの入力情報に従ってfilterフィルタリングを行う.
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>