AngularJSのビルトインのフィルターfilter、orderByで属性名を指定する以外に関数や式を指定する事も出来ます。式や関数を指定し、カスタマイズする方法をまとめました。
デモとコードサンプルはこちら。
AngularJSのビルトインのフィルターfilter、orderByで属性名を指定する以外に関数や式を指定する事も出来ます。式や関数を指定し、カスタマイズする方法をまとめました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
filterで関数を使用
１）filterで関数を使用する場合の書式
{{ filter_expression | filter:関数名 }}
・filter_expression
フィルター対象の配列データを示す式。
・filter:関数名
入力の配列データの各要素に対して関数が呼び出され、この関数にはfunction(value, index)のように各配列要素の値とインデックスが引数として渡されます。
２）サンプル
下記例では、myScores配列内の国語(jpn）、算数（math）、理科（sci）の得点の合計が180以上のデータのみをフィルタリングして表示しています。
（HTML）
<tr ng-repeat=”myScore in myScores | filter:selectPass”>
（スクリプト）
$scope.selectPass = function (item) {
if ((item.jpn + item.math + item.sci) > 180 ) {
return item;
}
};
{{ filter_expression | filter:関数名 }}
・filter_expression
フィルター対象の配列データを示す式。
・filter:関数名
入力の配列データの各要素に対して関数が呼び出され、この関数にはfunction(value, index)のように各配列要素の値とインデックスが引数として渡されます。
２）サンプル
下記例では、myScores配列内の国語(jpn）、算数（math）、理科（sci）の得点の合計が180以上のデータのみをフィルタリングして表示しています。
（HTML）
<tr ng-repeat=”myScore in myScores | filter:selectPass”>
（スクリプト）
$scope.selectPass = function (item) {
if ((item.jpn + item.math + item.sci) > 180 ) {
return item;
}
};
orderByで式を指定して、項目クリックでソート
下記例では、orderByにsortClmを指定し、表の項目名をクリックするとその項目を使ってソートできるようにしています。
<table class=”table”>
<thead>
<tr>
<th><a href=”” ng-click=”sortClm = ‘day’; reverse=!reverse”>日時</a></th>
<th><a href=”” ng-click=”sortClm = ‘jpn’; reverse=!reverse”>国語</a></th>
<th><a href=”” ng-click=”sortClm = ‘math’; reverse=!reverse”>算数</a></th>
<th><a href=”” ng-click=”sortClm = ‘sci’; reverse=!reverse”>理科</a></th>
<th>平均</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=”myScore in myScores | orderBy:sortClm:reverse”>
<td>{{myScore.day}}</td>
：
<table class=”table”>
<thead>
<tr>
<th><a href=”” ng-click=”sortClm = ‘day’; reverse=!reverse”>日時</a></th>
<th><a href=”” ng-click=”sortClm = ‘jpn’; reverse=!reverse”>国語</a></th>
<th><a href=”” ng-click=”sortClm = ‘math’; reverse=!reverse”>算数</a></th>
<th><a href=”” ng-click=”sortClm = ‘sci’; reverse=!reverse”>理科</a></th>
<th>平均</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=”myScore in myScores | orderBy:sortClm:reverse”>
<td>{{myScore.day}}</td>
：
orderByで関数を使用
下記例では、価格の昇順でソートしていますが、在庫がゼロの商品は最下部に表示するように関数を定義しています。
（HTML）
<tr ng-repeat=”item in products | orderBy:customOrder”>
（スクリプト）
$scope.customOrder = function (item) {
return item.stock == 0 ? 99999 : item.price;
};
$scope.products = [
{name: “デジタルカメラA”,price: 8500,stock:3},
{name: “デジタルカメラD”,price: 3500,stock:0},
{name: “パソコンB”,price: 15900,stock:6},
{name: “デジタルカメラB”,price: 9800,stock:3},
{name: “パソコンD”,price: 5900,stock:0},
{name: “パソコンC”,price: 25900,stock:1},
{name: “パソコンA”,price: 14900,stock:10}
];
（HTML）
<tr ng-repeat=”item in products | orderBy:customOrder”>
（スクリプト）
$scope.customOrder = function (item) {
return item.stock == 0 ? 99999 : item.price;
};
$scope.products = [
{name: “デジタルカメラA”,price: 8500,stock:3},
{name: “デジタルカメラD”,price: 3500,stock:0},
{name: “パソコンB”,price: 15900,stock:6},
{name: “デジタルカメラB”,price: 9800,stock:3},
{name: “パソコンD”,price: 5900,stock:0},
{name: “パソコンC”,price: 25900,stock:1},
{name: “パソコンA”,price: 14900,stock:10}
];