AngularJS
フィルタ
サーチ…
あなたの最初のフィルター
フィルタは、何かがページにどのように出力されるかを変更する、または配列をフィルタリングするために使用できる特別なタイプの関数、またはng-repeatアクションです。フィルタを作成するには、 app.filter()メソッドを呼び出し、名前と関数を渡します。構文の詳細については、以下の例を参照してください。
たとえば、文字列をすべて大文字（基本的に.toUpperCase() javascript関数のラッパー.toUpperCase()変更するフィルタを作成します。
var app = angular.module("MyApp", []);
// just like making a controller, you must give the
// filter a unique name, in this case "toUppercase"
app.filter('toUppercase', function(){
// all the filter does is return a function,
// which acts as the "filtering" function
return function(rawString){
// The filter function takes in the value,
// which we modify in some way, then return
// back.
return rawString.toUpperCase();
};
});
上で何が起こっているのかを詳しく見てみましょう。
まず、コントローラーのような "toUppercase"というフィルターを作成します。 app.filter(...) 。次に、そのフィルタの関数が実際のフィルタ関数を返します。この関数は、フィルタリングされるオブジェクトである単一のオブジェクトを取り、そのオブジェクトのフィルタリングされたバージョンを返す必要があります。
注意： この状況では、フィルタに渡されるオブジェクトが文字列であると仮定しているため、常に文字列にのみフィルタを使用することがわかります。つまり、オブジェクトをループして（配列の場合）、文字列のすべての要素を大文字にするフィルタをさらに改良することができます。
次に、新しいフィルタを実際に使用しましょう。私たちのフィルタは、角度テンプレートまたはJavaScript関数（注入Angular参照）の2つの方法で使用できます。
Javascript
角度のある$filterオブジェクトをコントローラに注入し、それを使ってその名前を使ってフィルタ関数を取得します。
app.controller("MyController", function($scope, $filter){
this.rawString = "Foo";
this.capsString = $filter("toUppercase")(this.rawString);
});
HTML
角度のディレクティブの場合は、実際の文字列の後にディレクティブのフィルタ名のあとにパイプ（ | ）記号を続けて使用します。たとえば、 MyControllerというコントローラがあり、そのコントローラの要素としてrawStringという文字列があるとします。
<div ng-controller="MyController as ctrl">
<span>Capital rawString: {{ ctrl.rawString | toUppercase }}</span>
</div>
エディタのノート： Angularには、大文字を含む多数のフィルタが組み込まれています。また、「toUppercase」フィルタは、フィルタの動作を簡単に示すデモとしてのみ使用 されますが、独自の大文字の関数を作成する必要はあり ません。
値を削除するカスタムフィルタ
フィルタの一般的な使用例は、配列から値を削除することです。この例では、配列を渡し、その中に見つかったすべてのnullを取り除き、配列を返します。
function removeNulls() {
return function(list) {
for (var i = list.length - 1; i >= 0; i--) {
if (typeof list[i] === 'undefined' ||
list[i] === null) {
list.splice(i, 1);
}
}
return list;
};
}
これは、HTMLのように使用される
{{listOfItems | removeNulls}}
またはコントローラのような
listOfItems = removeNullsFilter(listOfItems);
値をフォーマットするカスタムフィルタ
フィルターの別の使用例は、単一の値をフォーマットすることです。この例では、値を渡し、適切な真のブール値を返します。
function convertToBooleanValue() {
return function(input) {
if (typeof input !== 'undefined' &&
input !== null &&
(input === true || input === 1 || input === '1' || input
.toString().toLowerCase() === 'true')) {
return true;
}
return false;
};
}
どのようなHTMLでこのように使用される：
{{isAvailable | convertToBooleanValue}}
またはコントローラのような：
var available = convertToBooleanValueFilter(isAvailable);
子配列でフィルタを実行する
この例は、カスタムフィルタを必要とせずに子配列でディープフィルタを実行する方法を示すために行ったものです。
コントローラ：
(function() {
"use strict";
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
function mainCtrl() {
var vm = this;
vm.classifications = ["Saloons", "Sedans", "Commercial vehicle", "Sport car"];
vm.cars = [
{
"name":"car1",
"classifications":[
{
"name":"Saloons"
},
{
"name":"Sedans"
}
]
},
{
"name":"car2",
"classifications":[
{
"name":"Saloons"
},
{
"name":"Commercial vehicle"
}
]
},
{
"name":"car3",
"classifications":[
{
"name":"Sport car"
},
{
"name":"Sedans"
}
]
}
];
}
})();
表示：
<body ng-app="app" ng-controller="mainCtrl as main">
Filter car by classification:
<select ng-model="classificationName"
ng-options="classification for classification in main.classifications"></select>
<br>
<ul>
<li ng-repeat="car in main.cars |
filter: { classifications: { name: classificationName } } track by $index"
ng-bind-template="{{car.name}} - {{car.classifications | json}}">
</li>
</ul>
</body>
完全なDEMOを確認してください。
コントローラーまたはサービスでのフィルターの使用
$filter注入することで、Angularモジュールの定義済みフィルタは、コントローラ、サービス、ディレクティブ、または他のフィルタでも使用できます。
angular.module("app")
.service("users", usersService)
.controller("UsersController", UsersController);
function usersService () {
this.getAll = function () {
return [{
id: 1,
username: "john"
}, {
id: 2,
username: "will"
}, {
id: 3,
username: "jack"
}];
};
}
function UsersController ($filter, users) {
var orderByFilter = $filter("orderBy");
this.users = orderByFilter(users.getAll(), "username");
// Now the users are ordered by their usernames: jack, john, will
this.users = orderByFilter(users.getAll(), "username", true);
// Now the users are ordered by their usernames, in reverse order: will, john, jack
}
ng-repeatの外部からフィルタリングされたリストにアクセスする
場合によっては、 ng-repeat外側からフィルタの結果にアクセスし、おそらく除外された項目の数を示すことができます。これは、 ng-repeat as [variablename]構文as [variablename]使用できます。
<ul>
<li ng-repeat="item in vm.listItems | filter:vm.myFilter as filtered">
{{item.name}}
</li>
</ul>
<span>Showing {{filtered.length}} of {{vm.listItems.length}}</span>