文字列操作に関わるフィルター
Angular Filterで文字列操作に関わるフィルターには、以下のようなものがあります。
| フィルター | 概要 |
|---|---|
| ucfirst | 文字列の先頭だけを大文字に |
| trim : chars | 文字列の前後から空白、または指定された文字charsを除去 |
| ltrim : chars | 文字列の前方から空白、または指定された文字charsを除去 |
| rtrim : chars | 文字列の後方から空白、または指定された文字charsを除去 |
| startsWith : str : case | 文字列が指定された部分文字列strで始まるか（caseは大文字小文字を区別するか） |
| endsWith : str : case | 文字列が指定された部分文字列strで終わるか（caseは大文字小文字を区別するか） |
| stripTags | 文字列からタグを除去 |
| repeat : num : sep | 文字列をnum回繰り返し出力（sepは区切り文字） |
| reverse | 文字列をさかさまに |
| truncate : num : suff | 文字列を指定文字数numを切り捨て（suffは末尾に付与する省略文字） |
| uriEncode／uriComponentEncode | 文字列をURIエンコード |
| slugify : sep | 文字列に含まれる空白を指定文字sep（デフォルトはハイフン）で置換 |
| stringular : str :... | 文字列展開（文字列に含まれる{0}、{1}...にstrを埋め込み） |
| test : pattern : flag | 文字列を正規表現パターンpatternで検索し、マッチしているかを判定（flagは正規表現フラグ）。 |
| match : pattern : flag | 文字列を正規表現パターンpatternで検索し、マッチした文字列を配列で取得（flagは正規表現フラグ） |
| wrap : str : start : end | 文字列の前後を、start／endで示された文字列で括る |
以下に、具体的なコード例と、その結果を示します。Angular Filterを利用するには、ライブラリとしてangular-filter.min.jsをインポートした上で、angular.filterモジュールへの依存関係を設定します。
リスト1 strings.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
<script src="scripts/strings.js"></script>
</head>
<body ng-controller="MyController">
<ul>
<li>ucfirst：{{ 'codezine wings webdeli' | ucfirst }}</li>
<!--結果：Codezine Wings Webdeli-->
<li>trim：{{ ' AngularJSアプリ ' | trim }}</li>
<!--結果：AngularJSアプリ-->
<li>ltrim：{{ '＊AngularJSアプリ＊' | ltrim: '＊' }}</li>
<!--結果：AngularJSアプリ＊-->
<li>rtrim：{{ '＊AngularJSアプリ＊' | rtrim: '＊' }}</li>
<!--結果：＊AngularJSアプリ-->
<li>startsWith：{{str | startsWith : 'http://'}}</li>
<!--結果：true-->
<li>endsWith：{{ str | endsWith : '.html' }}</li>
<!--結果：false-->
<li>stripTags：{{ desc | stripTags }}</li>
<!--結果：詳細は、サポートページを参照-->
<li>repeat：{{ 'CodeZine' | repeat: 3: '＃' }}</li>
<!--結果：CodeZine＃CodeZine＃CodeZine-->
<li>reverse：{{ 'CodeZine' | reverse }}</li>
<!--結果：eniZedoC-->
<li>truncate：{{ site | truncate: 15: '...': true }}</li>
<!--結果：姉妹サイトWebdeli（http://www.web-deli.com/）...-->
<li>uriEncode：{{ data | uriEncode }}</li>
<!--結果：@!()%22&,.%E3%81%84+-/#_;:-->
<li>uriComponentEncode：{{ data | uriComponentEncode }}</li>
<!--結果：%40!()%22%26%2C.%E3%81%84%2B-%2F%23_%3B%3A-->
<li>slugify：<a ng-href="http://www.web-deli.com/match/{{ tool | slugify }}">リンク</a></li>
<!--結果：<a ng-href="http://www.web-deli.com/match/spicy-tools"...>リンク</a>-->
<li>stringular：{{'{0}の{1}は、{2}円です。' | stringular : 'リオ': 'おこづかい' : 700}}</li>
<!--結果：リオのおこづかいは、700円です。-->
<li>test：{{ '080-1234-5678' | test: '^080\-[0-9]{4}\-{1}[0-9]{4}$' }}</li>
<!--結果：true-->
<li>match：{{ '080-1234-5678' | match: '\\d+': 'g' }}</li>
<!--結果：["080","1234","5678"]-->
<li>wrap：{{ 'CodeZine' | wrap: '＜': '＞' }}</li>
<!--結果：＜CodeZine＞-->
</ul>
</body>
</html>
リスト2 strings.js
angular.module('myApp', ['angular.filter'])
.controller('MyController', ['$scope', function($scope) {
$scope.str = 'http://www.wings.msn.to/';
$scope.desc = '詳細は、<a href="http://www.wings.msn.to/">サポートページ</a>を参照<img src="wings.gif" /></div>';
$scope.site = '姉妹サイトWebdeli（http://www.web-deli.com/） もよろしくお願いします。';
$scope.data='@!()"&,.い+-/#_;:';
$scope.tool='Spicy Tools';
}]);
数値演算に関わるフィルター
続いて、数値演算に関わるフィルターです。
| フィルター | 概要 |
|---|---|
| min : exp | 最小値を取得（オブジェクト配列の場合、expは対象のプロパティ） |
| max : exp | 最大値を取得（オブジェクト配列の場合、expは対象のプロパティ） |
| percent : total : round | 式の値の総合値totalに対するパーセンテージ（roundは小数点以下を丸めるか） |
| radix : base | 数値を基数baseで変換 |
| sum : init | 配列の値を合計（initは最初に足しこむ値） |
| degrees : decimal | ラジアンをたびに変換 |
| radians : decimal | 度をラジアンに変換 |
| shortFmt : decimal | 数値をK（キロ）、M（メガ）の単位に変換 |
| byteFmt : decimal | 数値（単位はバイト）をKB（キロバイト）、M（メガバイト）の単位に変換 |
| kbFmt : decimal | 数値（単位はキロバイト）をKB（キロバイト）、M（メガバイト）の単位に変換 |
以下に、具体的なコード例と、その結果を示します。
リスト3 math.html
<ul>
<li>max：{{ members | max: 'age' }}</li>
<!--結果：{"name":"山田太郎","age":40,"email":"tyamada@examples.com"}-->
<li>min：{{ members | min: 'age' }}</li>
<!--結果：{"name":"鈴木健太","age":20,"email":"ksuzuki@examples.com"}-->
<li>percent：{{ 70 | percent: 300: true }}％</li>
<!--結果：23％-->
<li>radix：{{ 255 | radix: 16 }}</li>
<!--結果：FF-->
<li>sum：{{ [ 50,70,90 ] | sum }}</li>
<!--結果：210-->
<li>degrees：{{ 2 | degrees: 1}}</li>
<!--結果：114.6-->
<li>radians：{{ 180 | radians: 1 }}</li>
<!--結果：3.1-->
<li>shortFmt：{{ 12345 | shortFmt: 0 }}</li>
<!--結果：12 K-->
<li>byteFmt：{{ 12345 | byteFmt: 3 }}</li>
<!--結果：12.056 KB-->
<li>kbFmt：{{ 12345 | kbFmt: 2 }}</li>
<!--結果：12.06 MB-->
</ul>
