AngularJSのフィルタリングとソートの詳細解説及び実例コード

前回はAngularJSの使用方法について学びました。ここでは、簡単なプログラムを作成し、クエリフィルタリングおよびソート機能を実現します。

このプログラムでは以下のことが学べます：

　　1 angularjsのフィルタ

　　2 ng-repeatの使用方法

　　3 コントローラーの使用

　　4 データバインディング

　　プログラム設計分析

　　まず、クエリフィルタリングを行う場合、AngularJSのフィルタフィルターを使用する必要があります。

　　表現の後ろにパイプ記号 | を使用して、以下の形式でフィルタリング効果を達成できます：

　　フィルタリング操作を実行するために、filterを使用します。queryはクエリフィルタリング時に入力される文字列です。

　　同様に、orderByを使用してソート機能を実現できます：

　　上記のクエリおよびソートは、queryとorderの2つの変数に関連しています。ここでは、直接ng-modelでデータバインディングを実現します：

      Search:<input ng-model="query">
      Sort by:<select ng-model="order">
        <option value="name">name</option>
        <option value="age">age</option>
      </select>

　　AngularJSはDOMに基づくフレームワーク言語であり、リスナーまたはイベントトリガーの実装は必要ありません。queryがいる入力フィールドが何かの変更が発生した場合、入力フィールドと下の表示が双方向でリフレッシュされることがあります！

　　他のフレームワークに比べて、文字列をDOMノードのinnerHTMLに追加してDOMに追加されるため、AngularJSの実装方法はモデルとビューの表示を高速化します。また、大量の不必要なリスナーやトリガーなどのコードの記述を減少させ、springのような効果を実現します~

　　データの表示は、ng-repeatの実装。ウェブページがng-repeatのとき、配列の各要素ごとにタグをクローンし、コンパイルおよび解析を行います。　　　

　　　<ul class="persons">
        <li ng-repeat="person in persons | filter:query | orderBy:order">
          {{person.name}}
          {{person.age}}
        </li>
      </ul>

　　残りの作業はscript内でperons配列の初期化が必要です：　　　

  <div ng-controller="ctl">
          ...
    </div>
    <script type="text/javascript">
      function ctl($scope){
        $scope.persons = [
          {"name":"xingoo","age":25},
          {"name":"zhangsan","age":18},
          {"name":"lisi","age":20},
          {"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 src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="ctl">
      Search:<input ng-model="query">
      Sort by:<select ng-model="order">
        <option value="name">name</option>
        <option value="age">age</option>
      </select>
      <ul class="persons">
        <li ng-repeat="person in persons | filter:query | orderBy:order">
          {{person.name}}
          {{person.age}}
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      function ctl($scope){
        $scope.persons = [
          {"name":"xingoo","age":25},
          {"name":"zhangsan","age":18},
          {"name":"lisi","age":20},
          {"name":"wangwu","age":30}
        ];
        $scope.order = "age";
      }
    </script>
  </body>
</html>

　　使用結果：

　　デフォルトでは、ageでソートします：

　　選択すると、nameでソートを使用できます。

　　文字を再入力する際には、自動的にクエリフィルタリングして一部のオプションを排除します。

以上がAngularJS フィルタリングとソートに関する情報の整理です。今後も関連する情報を追加していく予定です。皆様の本サイトへのサポートに感謝します。

声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしました。本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害が疑われる内容がある場合は、メールを送信してください：notice#oldtoolbag.com（メールを送信する際には、#を@に変更してください。届出を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは侵害が疑われる内容をすぐに削除します。）

基本教程