AngularJSの ng-repeat からフィルタをかけて絞り込みする方法

AngularJSで要素を繰り返ししたいとき、便利なのが ng-repeat という構文

この ng-repeat では、フィルタ（ filter ）を上手く使うことで絞り込みができます。

絞り込みに使うことができる方法は次の２つ

inputとかの入力値で絞り込み
関数とかを使って絞り込み

やり方自体もそんなに難しくもありません。

ここでは上２つの方法で、 ng-repeat にフィルタをかける方法をまとめました。

このページの目次

１．inputとかの入力値で絞り込みするやり方
２．関数を使って ng-repeat をフィルタするやり方
ここまでのまとめ

１．inputとかの入力値で絞り込みするやり方

まず１つめの方法は input とかの入力欄の値で絞り込みするやり方

コチラの方法だと、全てビュー内で完結できるからスマートに書けます。

その具体的なやり方は次の通りです。

まず例として、次みたいなビュー（HTML）を作成

<body ng-app="myApp" ng-controller="Ctrl">
  <label>
    名前で絞り込み : <input ng-model="searchText" />
  </lable>
  <ul>
    <li ng-repeat="item in [
          {name:"Cupcake"}, {name:"Dounut"}, {name:"Eclair"}
        ] | filter:searchText" >
      {{item.name}}
    </li>
  </ul>
</body>

<label>

名前で絞り込み : <input ng-model="searchText" />

</lable>

<ul>

<li ng-repeat="item in [

{name:"Cupcake"}, {name:"Dounut"}, {name:"Eclair"}

] | filter:searchText" >

</li>

</ul>

</body>

ハイライトした８行目に注目

まず ng-model="searchText" を持つ入力欄を作成、
そして ng-repeat の中で適当な要素を作成して、ビュー表示してます。

重要なのが filter:searchText というところ

ここで ng-repeat の繰り返し中に、 searchText の入力値でフィルタしてあげてます。

ちなみにフィルタ（ filter ）の構文を一般化すると、次みたいな感じ

{{ filter_expression | filter:expression:comparator }}

1	{{ filter_expression \| filter:expression:comparator }}

まず filter_expression にフィルタ対象の配列とかを指定、
そのあと filter: に続けて絞り込み条件を渡すだけ

参考URL　：　http://js.studio-kingdom.com/angularjs/ng_filter/filter

条件には入力値だけでなく、関数とかオブジェクトも渡せます。

２．関数を使って ng-repeat をフィルタするやり方

では次に関数を使って絞り込みするやり方について

こっちは入力値を直接渡すのに比べて、より柔軟に絞り込みできます。

その具体的なやり方は次の取り

まず例として、次みたいなビュー（HTML）を定義

<body ng-app="myApp" ng-controller="Ctrl">
  <label>
    名前で絞り込み : <input ng-model="searchText" />
  </lable>
  <ul>
    <li ng-repeat="item in [
          {name:'Cupcake'}, {name:'Dounut'}, {name:'Eclair'}
        ] | filter:filterByCodeName" >
      {{item.name}}
    </li>
  </ul>
</body>

<label>

名前で絞り込み : <input ng-model="searchText" />

</lable>

<ul>

<li ng-repeat="item in [

{name:'Cupcake'}, {name:'Dounut'}, {name:'Eclair'}

] | filter:filterByCodeName" >

</li>

</ul>

</body>

ハイライトした filter:filterByCodeName という部分に注目

こういう風に関数名を直接渡してやればOK

引数とかを渡す必要は特にありません。

そうしたら、この関数をコントローラ側で定義すればいいだけです。

例えば次コードみたいな感じで

angular.module('myApp')
.controller('Ctrl', ['$scope', function($scope) {
  $scope.filterByName = function(item){
    /// 入力欄のテキストを取得
    var searchText = $scope.searchText;
    if(!searchText){return true;}
    
    /// 正規表現を使って絞り込み
    var regexp = new RegExp('.*'+searchText+'.*');
    return regexp.test(item.name);
  };
}]);

angular.module('myApp')

.controller('Ctrl', ['$scope', function($scope) {

$scope.filterByName = function(item){

/// 入力欄のテキストを取得

var searchText = $scope.searchText;

if(!searchText){return true;}

/// 正規表現を使って絞り込み

var regexp = new RegExp('.*'+searchText+'.*');

return regexp.test(item.name);

};

}]);

上のコードだと item っていう引数を取ってる点に要注意

これは ng-repeat で現在参照されてる値を表してます。

あとはこの値をビューとして表示するか、それを真偽値（ true / false ）で返せばいいだけ

上の例だと正規表現を使って絞り込みしてるのが分かりますか？

関数を渡すと、こういう風に柔軟な絞り込みができるのが利点ですね。

ここまでのまとめ

ということで簡単に今までのまとめ

絞り込みには filter を使う
基本構文は filter_expression | filter:expression みたいな形。対象となる配列を渡し、 filter: の後に入力値とかの絞り込みしたい値を渡すだけ
関数による絞り込みも可
そして filter には値だけでなく、関数なども指定可能。もし関数で絞り込みする場合、条件式から true / false を返せば表示するかの絞り込みができる