自作リストと検索フィルターを作る。

Level 0｜｜2016/06/20

今まで学んだことを実践してみます。リストを作って、検索ボックスで入力されたテキストをフィルタして結果を返します。

目次サンプルコード ng-repeat属性 filter Valueメソッド

サンプルコード

まずは、どんなものを作るかを見てみましょう。

ng-repeatを使ってみる

タイトル名、価格をテキストボックスに入力すると、検索結果に反映

タイトル名	価格	発売日
{{list.title}}	{{list.price \| number}}円	{{list.published \| date: 'yyyy年M月dd日'}}

たとえば、テキストボックスに「my」と入力してみましょう。表示されているリストの中から、該当する項目だけが表示され、他は非表示になります。次に中身のコードを見ていきます。

HTMLファイル


<!doctype html>
<html class="no-js" lang="ja" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>                
<div ng-controller="MyController">

<h1>ng-repeatを使ってみる</h1>
タイトル名、価格をテキストボックス入力すると、検索結果に反映<br />
2）ng-model属性
<input type="text" ng-model="query">
<table>
<tr><td>タイトル名</td><td>価格</td><td>発売日</td></tr>
1）ng-repeat属性
3)フィルター
<tr ng-repeat="list in ctmls|filter:query">
<td>{{list.title}}</td>
<td>{{list.price | number}}円</td>
<td>{{list.published | date: 'yyyy年MM月dd日'}}</td>
</tr>
</table>

</div>
</body>
</html>

JSファイル


angular.module('myApp', [])
 .controller('MyController',function($scope, CustomList){
     $scope.ctmls = CustomList();
 })
// valueメソッド
  .value('CustomList', function(){
     return [
      {
          title: 'bootstrapリファレンス',
          price: 12000,
          published: new Date(2016, 1, 18)
      },
      {
          title: 'wordpressリファレンス',
          price: 15000,
          published: new Date(2016, 4, 18)
      },
      {
          title: 'HTMLリファレンス',
          price: 2500,
          published: new Date(2016, 7, 18)
      },
      {
          title: 'CSSリファレンス',
          price: 5000,
          published: new Date(2016, 6, 18)
      },
      {
          title: 'jQueryリファレンス',
          price: 7500,
          published: new Date(2016, 5, 18)
      },
      {
          title: 'mySQLリファレンス',
          price: 10000,
          published: new Date(2016, 4, 18)
      }
     ];
 });

DEMOファイルをDownload！(2kb)

ng-repeat属性

ng-repeat属性は、ng-repeatを付加したHTMLtag内で、配列を順に取り出します。

HTMLtag ng-repeat属性="仮変数 in 対象配列"

サンプルコードの「tr ng-repeat="list in ctmls"」を解説すると、JSで指定する「ctmls」の配列を順に、「list」で取り出して表示しています。また、HTMLtagの「tr」の中にあるリストだけを対象にしています。

filter

任意の式 | filter : パラメーター

filterは、任意の式に従った中身にフィルタリングをかけます。
サンプルでは、テキストボックスに「ng-model="query"」を、対象のリストに「filter:query」を指定しています。テキストボックスで入力された文字列を取得し、対象の中身にフィルターをかけています。

Valueメソッド

value( 任意の名前 , 指示 )

まず、任意の名前を「CustomList」にします。
以下の式では、「CustomList」のデータを、スコープオブジェクトの「ctmls」に格納しています。
そして、格納したデータをHTMLの指示された場所（「tr ng-repeat="list in ctmls"」）に表示させます。


// JSファイル
angular.module('myApp', [])
 .controller('MyController',function($scope, CustomList){
     $scope.ctmls = CustomList();
 })


<-- htmlファイル -->
<tr ng-repeat="list in ctmls">

Valueを指定

次に、Valueメソッドを使って値を指定します。Valueメソッドは、複数のコントローラーを共有する時に、値を管理します。


// JSファイル
.value('CustomList', function(){
     return [
      {
          title: 'bootstrapリファレンス',
          price: 12000,
          published: new Date(2016, 1, 18)
      }
     ];
 });

「CustomList」の中身を、return [{}]を使って定義して、Valueメソッドで管理します。サンプルコードでは、return [{}]の中身は、「title」「price」「published」の項目名と、その値を指定しています。値は、{}で囲まれたものを、1グループとみなしています。

次に、HTMLを見てみましょう。


<!-- htmlファイル -->
<tr ng-repeat="list in ctmls|filter:query">
<td>{{list.title}}</td>
<td>{{list.price | number}}円</td>
<td>{{list.published | date: 'yyyy年MM月dd日'}}</td>
</tr>

ng-repeatの仮変数「list」を使って、JSで指定した「title」「price」「published」の値を結びつけています。
結びつけるには、{{list.title}}、{{list.price}}、{{list.published}}と指定します。

また、価格と発売日の項目には、「number」「date: 'yyyy年MM月dd日'」のフィルターを指定しています。
フ出力したいデータが、数字なのか？　文字列なのか？　価格なのか？　日付なのか？　など、値により「このデータはこう成型して吐き出して！」という意味になります。「number」「date」以外にもいろいろあるので、フォーマット文字列などを参考にしてください。

これで、検索フィルターの完成です。

サンプルファイルのデータを変えたり、いろいろいじってみてください。

ちなみに、年月日の月に関して、JSを触ったことのある方はご存知だと思いますが、「yyyy.mm.dd」で取得する月の値（mm）は、JSでは「0~11」の値で返されます。「5月」を吐き出したくても、0からのスタートなので、返り値は「4月」となります。

angularJSでは、あらかじめ取得する値に1を足したもの「m」で指定すると、1月～12月の値を返してくれます。

date: 'yyyy年M月dd日'

サンプルコードでは、わざとyyyy年MM月dd日にしているので、ここを直して確かめてみてください。

双方向データバインディングを学ぶ。

レベルアップ