AngularJS フィルタ

投稿日 2015/07/16

[Home]  | [Index]  | [ディレクティブ] [関数の使用]  | [サービス]  | [フィルタ] 

フィルタの概要

フィルタを使うとビューでモデルを加工して表示できる。{{ }} 内で | を使ってパイプラインのようにモデルをフィルタに送り加工を行う。

よく使うフィルタ

フィルタの使用例

uppercase, lowercase

このサンプルはテキストボックスに入力した文字列を uppercase, lowercase フィルタを使って変換する。

view (Jade)

form
 div(class="form-group", ng-init='filter_text1="aBcD"')
  //label(for="filter_text1") filter_text1
  input(type="text", ng-model="filter_text1", class="form-control")
 p(style="color:blue;margin-top:20px;margin-left:4%;") uppercase={{filter_text1 | uppercase}} : lowercase={{filter_text1 | lowercase}}

currency

このサンプルは、currency フィルタを使って金額表示を行っている。

view (Jade)

div(class="form-group", ng-init='filter_text3="100000000"')
 label(for="filter_text3") filter_text3
 input(id="filter_text3", type="text", ng-model="filter_text3", class="form-control")
 p(style="color:blue;margin-top:20px;margin-left:4%;") {{ filter_text3 | currency :"JPY":0}}

orderBy

このサンプルは orderBy フィルタを使って項目を並べ替えて表示している。

view (Jade)

div(ng-controller="controller2")
 ul
  li(ng-repeat="x in orderby_data | orderBy:'-age'") {{x.name}} {{x.age}}

controller

$scope.orderby_data = [
  {name:"あたる", age:14},
  {name:"ラム", age:13},
  {name:"しのぶ", age:14},
  {name:"めんどう", age:15},
  {name:"りょうこ", age:13}
];

filter

このサンプルは、配列の要素で 2005 より大きいものをフィルタを使って表示している。

view (Jade)

div(ng-controller="controller2")
 ul
  li(ng-repeat="x in filter_data | filter:filter_func", style="color:blue;") 

controller

/* filter filter */
$scope.filter_data = [
   2014,
   2013,
   2007,
   2006,
   2005,
   2004,
   2003
];

$scope.filter_func = function(value, index, array) {
  return array[index] - 2005 > 0;
}

 

ページの先頭へ