以前にAngularJの使用について学んだので、クエリフィルタリングとソートの関数を実装するための小さなプログラムを作成するだけです。
あなたはこのプログラムから学ぶことができます：
1つのAngularJSフィルター
2 Ng-Reepeatの使用方法
3。コントローラーの使用
4データバインディング
プログラミング分析
まず、最初にフィルターをクエリする場合は、AngularJSのフィルターフィルターを使用する必要があります。
パイプラインコマンド文字を使用します|式の直後に、次の記述方法に従ってフィルタリング効果を実現します。
{{人|フィルター：クエリ}}
フィルターを使用してフィルタリングを実装することにより、クエリはフィルタリングのクエリ時に入力された文字列です。
同様に、並べ替え関数は、Orderbyを使用して達成できます。
{{人|フィルター：クエリ| Orderby：注文}}
上記のクエリとソートには、クエリと順序の2つの変数が含まれます。ここでは、NG-Modelを直接使用してデータバインディングを実装できます。
検索：<入力ng-model = "query"> sort by：<select ng-model = "order"> <option value = "name"> name </option> <option value = "age"> age </option> </select>
AngularJSはDOMベースのフレームワーク言語であるため、リスナーやイベントトリガーを実装する必要はありません。クエリが配置されている入力ボックスに変更が変更されると、入力ボックスと次の式がトリガーされ、入力ボックスと次の式が更新されます！
他のいくつかのフレームワークと比較して、文字列に基づいてDOMノードInnerHtmlを介してDOMに追加されます。 AngularJSの実装は、モデルとビューの表示を加速します。また、不必要なリスナーやトリガーなどのコードの執筆を減らし、春のような効果を本当に達成します〜
データプレゼンテーションは、NG-Reepeatを通じて達成できます。 WebページがNg-Reepeatに解析すると、コンパイルと解析のために配列内の各要素に対してタグがクローニングされます。
<ul> <li ng-repeat = "人の人|フィルター：query | orderby：order"> {{person.name}} {{person.age}} </li> </ul>作業の残りの部分は、スクリプトでerons配列を初期化することです。
<div ng-controller = "ctl"> ... </div> <script type = "text/javascript"> function ctl（$ scope）{$ scope.persons = [{"name"： "xingoo"、 "age"：25}、{"name"： "zhangsan"、 "age"： "" "：" " {"name"： "wangwu"、 "age"：30}]; $ scope.order = "age"; } </script>コードと結果
最後に、すべてのコードが投稿されます。
<！doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script = " <body> <div ng-controller = "ctl">検索：<入力ng-model = "query"> sort by：<select ng-model = "order"> <option value = "name"> name </option> <option値= "age"> age </option> </select> <ul> <li ng-repeat = "person {{person.age}} </li> </ul> </div> <script = "text/javascript"> function ctl（$ scope）{$ scope.persons = [{"name"： "xingoo"、 "age"：25}、{"name"： "zhangsan"、 ""： "" {"name"： "wangwu"、 "age"：30}]; $ scope.order = "age"; } </script> </body> </html>結果の使用：
デフォルトでは、年齢を使用して並べ替えます。
選択することにより、名前ソートを使用できます
文字を入力すると、一部のオプションはクエリを介して自動的にフィルタリングされます。
上記は、AngularJSフィルタリングとソートの情報ソートです。今後も関連情報を追加し続けます。このウェブサイトへのご支援ありがとうございます！