リストとリストフィルター (6/6)

■オリジナルフィルターを利用する

では、作成したフィルター「getRepeat」を使ってみましょう。HTMLファイルを下のリスト欄のように書き換えてください。

今回は、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>

<< 前へ　

記事のリストに戻る

PC Site G+ mail