AngularJS：検索フィルター

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/nyDJr

前回紹介したrepeatのフィルター機能ですが、インプットフィールドと結びつけるだけでその値を検索対象にできます。

HTML

<p><input type="text" ng-model="query1" /></p>
<ul>
  <li ng-repeat="jojo in jojos | filter:query1">
    {{jojo.part}} / {{jojo.name}} / {{jojo.title}}
  </li>
</ul>

1行目でフィールドに「ng-model=”query1″」と定義し、3行目の「ng-repeat」でその query1 をフィルター対象に指定しています。

フィールドに文字を入力すると即座にフィルターを行います。

検索項目を指定する

<p><input type="text" ng-model="query2.part" /></p>
<ul>
  <li ng-repeat="jojo in jojos | filter:query2">
    {{jojo.part}} / {{jojo.name}} / {{jojo.title}}
  </li>
</ul>

1行目の「ng-model」の指定を「query2.part」としています。
そうすることで配列の「part」のみを検索対象としています。