@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

今更AngularJSでFilterを使ってみる

angularjs

今回はAngularJSのFilterを使ってみます。AngularJSで一覧表示などの繰り返し処理をするためには、ng-repeatに配列を指定することで実現出来ます。

$scope.persons = [
    { id: 1, /* データを定義 */},
    { id: 2, /* データを定義 */},
    { id: 3, /* データを定義 */},
    { id: 4, /* データを定義 */}
];

と配列に指定したうえで、ng-repeat="person in persons"のように繰り返ししたいHTML要素につけます。

<ul>
  <li ng-repeat="person in persons">{{person.name}}</li>
</ul>

これだけでも大変便利ですが、AngularJSではUNIXのパイプのようにしてFilterをかけることが出来ます。
例えば、インプット要素によって絞り込むには、ng-repeat="person in persons | filter:model名"のようにします。

<input type="text" ng-model="query">
<ul>
  <li ng-repeat="person in persons | filter:query">{{person.name}} / {{person.name_en}}</li>
</ul>

このようにすると、入力中からデータの中を絞り込むことが出来ます。ただし、nameもname_enも対象になります。例えば、ローマ字だけで絞り込みたい場合には、ng-model="query.name_en"のようにします。
絞り込むだけでなく、ソートもしたい場合には、orderByを指定します。誕生日の昇順にしたい場合には orderBy:'birthday'。降順にしたい場合には orderBy:'-birthday'とします。
入力項目で選択する場合には、次の通りに指定します。

<input type="radio" value="birthday" ng-model="order" ng-checked="true"> 昇順
<input type="radio" value="-birthday" ng-model="order" ng-checked="true"> 降順
<ul>
  <li ng-repeat="person in persons | filter:query | orderBy:order">{{person.name}} / {{person.name_en}} / {{person.birthday}}</li>
</ul>

また、Filterは繰り返し処理だけでなく、普通に表示したい場合にも利用出来ます。uppercaseを指定すれば、大文字にして表示することも出来ます。

<ul>
  <li ng-repeat="person in persons">{{person.name}} / {{person.name_en | uppercase}}</li>
</ul>

簡単でしたね。
サンプルコード（このデータは、疑似個人情報データ生成サービスを使って生成したもので実在するものではありません）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>AngularJS Filter Sample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  </head>
  <body>
    <div id="container" ng-app>
      <div ng-controller="MainCtrl">
        <input type="text" ng-model="query.name_en" placeholder="ローマ字で検索"/>
        <input type="text" ng-model="query.tel" placeholder="電話番号で検索" /><br>
        <input type="radio" ng-model="query.sex" value="" ng-checked="true" /> 両方
        <input type="radio" ng-model="query.sex" value="男" /> 男
        <input type="radio" ng-model="query.sex" value="女" /> 女<br>
        <input type="radio" ng-model="order" value="birthday" ng-checked="true"> 昇順
        <input type="radio" ng-model="order" value="-birthday"> 降順
        <table border="1">
          <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>NAME_EN</th>
            <th>SEX</th>
            <th>TEL</th>
            <th>BIRTHDAY</th>
          </tr>
          <tr ng-repeat="person in persons | filter:query | orderBy:order">
            <td>{{person.id}}</td>
            <td>{{person.name}}</td>
            <td>{{person.name_en | uppercase}}</td>
            <td>{{person.sex}}</td>
            <td>{{person.tel}}</td>
            <td>{{person.birthday}}</td>
          </tr>
        </table>
      </div>
    </div>
    <script>
      function MainCtrl($scope) {
          $scope.persons = [
              {id: 1, name: '高畑 睦夫', name_en: 'mutsuo takahata', sex: '男', tel: '08567669879', birthday: '1957/04/18'},
              {id: 2, name: '櫻井 彰三', name_en: 'shozo sakurai', sex: '男', tel: '08643889919', birthday: '1978/07/10'},
              {id: 3, name: '久保 理穂', name_en: 'riho kubo', sex: '女', tel: '09233303243', birthday: '1962/03/22'},
              {id: 4, name: '栗原 紫音', name_en: 'shion kurihara', sex: '女', tel: '08669954412', birthday: '1969/03/26'},
              {id: 5, name: '神崎 紫音', name_en: 'shion kanzaki', sex: '女', tel: '02343361014', birthday: '1954/07/06'},
              {id: 6, name: '浦野 花帆', name_en: 'kaho urano', sex: '女', tel: '02514995417', birthday: '1970/11/15'},
              {id: 7, name: '室井 麻世', name_en: 'mayo muroi', sex: '女', tel: '08363901060', birthday: '1956/01/13'},
              {id: 8, name: '川口 篤', name_en: 'atsushi kawaguchi', sex: '男', tel: '02212087641', birthday: '1964/05/14'},
              {id: 9, name: '細井 奈々美', name_en: 'nanami hosoi', sex: '女', tel: '09863580171', birthday: '1968/11/11'},
              {id: 10, name: '杉田 宗雄', name_en: 'muneo sugita', sex: '男', tel: '02609131146', birthday: '1960/03/08'}
          ];
      }
    </script>
  </body>
</html>

サンプル

AngularJS

AngularJS