サンプルはこちら。
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」のみを検索対象としています。