リストとリストフィルター (6/6)
作成:2015-12-26 09:39
更新:2015-12-26 09:39
更新:2015-12-26 09:39
■オリジナルフィルターを利用する
では、作成したフィルター「getRepeat」を使ってみましょう。HTMLファイルを下のリスト欄のように書き換えてください。
今回は、getRepeatフィルターの他、テキストを使って検索するフィルターも追加してあります。HTMLファイルを開くと、「GET?」の値がtrueのデータだけがテーブルに表示されます。これが、getRepeatフィルターによる処理です。
表示を確認したら、「検索」フィールドに何かテキストを書いてみましょう。すると、そのテキストを含む項目だけが表示されます。これは、filterフィルターを利用した処理です。filterを使うことで、簡単にデータの絞り込みが行えるようになっているんですね。
<tr>タグのng-repeat部分を見てみましょう。このように書かれていることがわかりますね。
obj in ctl.data――ctl.dataの配列から順に値を取り出してobjに代入する繰り返し
filter:fstr――テキストにfstrを含むかどうかチェック
orderBy : '-price'――priceの値が大きい順に並べ替え
getRepeat――getの値がtrueのものだけ表示
こんな具合に、４つの値がまとめられていたのです。最初のobj in ctl.dataで繰り返し処理を行い、その後の３つは、リストフィルターとして配列の内容を操作しています。これで、「検索」「並べ替え」「getRepeat」の全てが組み込まれます。
リストフィルターも、テキストのフィルターと同様、実際に作ってみると案外簡単に自作できることがわかるでしょう。リストとリストフィルターは、データの表示を行う場合には必須の機能といえます。ぜひ、ここでマスターしておきましょう。
今回は、getRepeatフィルターの他、テキストを使って検索するフィルターも追加してあります。HTMLファイルを開くと、「GET?」の値がtrueのデータだけがテーブルに表示されます。これが、getRepeatフィルターによる処理です。
表示を確認したら、「検索」フィールドに何かテキストを書いてみましょう。すると、そのテキストを含む項目だけが表示されます。これは、filterフィルターを利用した処理です。filterを使うことで、簡単にデータの絞り込みが行えるようになっているんですね。
<tr>タグのng-repeat部分を見てみましょう。このように書かれていることがわかりますね。
ng-repeat="obj in ctl.data | filter:fstr
| orderBy : '-price' | getRepeat"
obj in ctl.data――ctl.dataの配列から順に値を取り出してobjに代入する繰り返し
filter:fstr――テキストにfstrを含むかどうかチェック
orderBy : '-price'――priceの値が大きい順に並べ替え
getRepeat――getの値がtrueのものだけ表示
こんな具合に、４つの値がまとめられていたのです。最初のobj in ctl.dataで繰り返し処理を行い、その後の３つは、リストフィルターとして配列の内容を操作しています。これで、「検索」「並べ替え」「getRepeat」の全てが組み込まれます。
リストフィルターも、テキストのフィルターと同様、実際に作ってみると案外簡単に自作できることがわかるでしょう。リストとリストフィルターは、データの表示を行う場合には必須の機能といえます。ぜひ、ここでマスターしておきましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!doctype html>
<html>
<head>
<title>AngularJS Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
body { color:gray; }
h1 { font-size:18pt; font-weight:bold; }
span.label { display:inline-block;width:50px; color:red; }
input { width:100px; }
.msg { font-size:14pt; font-weight:bold;color:gray; }
th { color:#eee; background-color:#999; padding: 5px 10px;}
td { color:#333; background-color:#ddd; padding: 5px 10px;}
</style>
</head>
<body ng-app="myapp" ng-init="num=0">
<h1>データ表示</h1>
<p>テキストを入力して下さい。</p>
<div ng-controller="HeloController as ctl">
<div class="input">
<span class="label">検索:</span>
<input type="text" ng-model="fstr">
</div>
<p class="msg">{{ctl.getData()}}</p>
<hr/>
<table>
<tr><th>ID</th><th>NAME</th><th>PRICE</th><th>GET?</th></tr>
<tr ng-repeat="obj in ctl.data | filter:fstr | orderBy : '-price' | getRepeat">
<td>{{obj.id}}</td>
<td>{{obj.name}}</td>
<td>{{obj.price | currency:"¥"}}</td>
<td>{{obj.get}}</td>
</tr>
</table>
</div>
</body>
</html>
※関連コンテンツ