公開日
最終更新
記事区分
AngularJS にはモデルの値を表示用に変換するフィルタという機能があります。コマンドラインにおけるパイプのように使用します。公式ドキュメントはこちらです。
フィルターの使用例
<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
ここにサンプルコードを記述。
</body>
</html>
filter (絞り込み)
<div ng-controller="myController">
<p>部分一致</p>
<ul>
<li ng-repeat="item in mylist | filter:'str'">{{ item }}</li>
</ul>
<p>完全一致 ({{ filtered_mylist.length }} 件)</p>
<ul>
<li ng-repeat="item in mylist | filter:'str':true as filtered_mylist">{{ item }}</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('myController', ['$scope', function($scope){
$scope.mylist = [
{ key: 'str' },
'abc',
'string',
'str'
];
}]);
</script>
limitTo (表示個数の制限)
<div ng-controller="myController">
<ul>
<li ng-repeat="item in mylist | limitTo:2">{{ item }}</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('myController', ['$scope', function($scope){
$scope.mylist = [1,2,3,4,5];
}]);
</script>
orderBy (ソート)
<div ng-controller="myController">
<p>昇順</p>
<ul>
<li ng-repeat="item in mylist | orderBy:'mykey'">{{ item.mykey }}</li>
</ul>
<p>降順</p>
<ul>
<li ng-repeat="item in mylist | orderBy:'mykey':true | limitTo:2">{{ item.mykey }}</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('myController', ['$scope', function($scope){
$scope.mylist = [
{ mykey: 3 },
{ mykey: 1 },
{ mykey: 2 }
];
}]);
</script>
lowercase / uppercase (小文字化、大文字化)
<div ng-controller="myController">
<p>{{ myModel | lowercase }}</p>
<p>{{ myModel | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('myController', ['$scope', function($scope){
$scope.myModel = 'Abc';
}]);
</script>
number (数値の整形)
小数第二位まで表示するためには :2 とします。
<div ng-controller="myController">
<input type="text" ng-model="myNumber">
<p>{{ myNumber | number:2 }}</p>
</div>
<script>
angular.module('myApp', []).controller('myController', ['$scope', function($scope){
$scope.myNumber = 10 / 3;
}]);
</script>
json (オブジェクトを JSON 形式文字列に変換)
プリントデバッグなどで使用します。
<div ng-controller="myController">
<p>{{ myJson | json }}</p>
</div>
<script>
angular.module('myApp', []).controller('myController', ['$scope', function($scope){
$scope.myJson = {
key1: 123,
key2: 'abc'
};
}]);
</script>
date (日付時刻のフォーマット指定)
<div ng-controller="myController">
<p>{{ currentTime | date:'yyyy/MM/dd HH:mm:ss' }}</p>
</div>
<script>
angular.module('myApp', []).controller('myController', ['$scope', function($scope){
$scope.currentTime = new Date();
}]);
</script>
currency (ドル)
<div ng-controller="myController">
<input type="text" ng-model="dollar">
<p>{{ dollar | currency }}</p>
</div>
<script>
angular.module('myApp', []).controller('myController', ['$scope', function($scope){
$scope.dollar = 999999;
}]);
</script>
フィルターを自作
基本的なフィルター
<div ng-controller="myController">
<p>{{ 123 | myfilter }}</p>
<p>{{ 'abc' | myfilter }}</p>
<p>{{ 'abc' | myfilter:true:true }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.filter('myfilter', function(){
return function(value, opt1, opt2){ // オプション指定が可能
if(opt1 && opt2) return "AAA";
return angular.isNumber(value);
};
});
app.controller('myController', ['$scope', function($scope){
}]);
</script>
関数やオブジェクトをアプリケーション内で共有する仕組みであるサービスを自作フィルターの依存先として登録 (DI: Dependency Injection) することで、フィルター処理の一部を動的に変更できます。
<div ng-controller="myController">
<p>{{ 90 | myfilter }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.filter('myfilter', ['myValueService', 'myFuncService', function(myValueService, myFuncService){
return function(value){
return myFuncService(myValueService, value);
};
}]);
app.value('myValueService', 10);
app.value('myFuncService', function(a,b){
return a + b;
});
app.controller('myController', ['$scope', function($scope){
}]);
</script>
0
Rubyを使った効率的なスクリプトの書き方を紹介
記事の執筆者にステッカーを贈る
有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、 記事の読者は、執筆者に有料のステッカーを贈ることができます。
さらに詳しく →
Feedbacks
ログインするとコメントを投稿できます。
関連記事
- AngularJS 公式ドキュメントの利用例AngularJS はクライアントサイドの JavaScript フレームワークです。Angular は「角のある」という意味の英単語であり HTML のブラケットを表現しています。また随所で見られる ng というワードは発音が angular と似ているため採用されました。AngularJS の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまって...
- ルーティングを定義してシンプルな SPA を構築 (AngularJS)AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。 サンプルコード index.html <!DOCTYPE html> <html lang...
- DOM 操作ディレクティブ (AngularJS)AngularJS のビルトインディレクティブのうち DOM 操作に関するものを、コード例とともに列挙します。公式ドキュメントはこちらです。 DOM 操作ディレクティブ <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <script type="...
- HTTP 通信 (AngularJS)AngularJS における HTTP 通信では、XMLHttpRequest オブジェクトが利用されています。AngularJS で HTTP 通信を行うためのサンプルコードを以下に示します。公式ページはこちらです。 index.html <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <...
- サービス (AngularJS)AngularJS のビルトインサービスのうち代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <script src="angular.min.js">...
