吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

filterメソッド(カスタムfilter)の作り方

2013年12月12日 / category : angularjs, filter, lab

filterメソッド(カスタムfilter)の作り方をまとめます。
構文は下記の通りになります。

■HTML – index.html
{{value | function:param}}
■JavaScript – app.js
myApp.filter('function', function(){
	return function(_value, _param){
        	return //filter処理
	};
});

_paramには、数値(number)、文字列(string)、論理値(boolean)が使えそうです。(他にもあるかもです・・・)
それでは、これらのサンプルを下記に紹介します。

A: custom filters

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">

<dl>
<dt>元の数値(num)に100を足す</dt>
<dd>num = {{num}}</dd>
<dd>num + 100 = {{num | addNumber:100}}</dd>
</dl>

<dl>
<dt>元の文字列(str)に文字列「かきくけこ」を足す</dt>
<dd>str = {{str}}</dd>
<dd>str + 'かきくけこ' = {{str | addString:'かきくけこ'}}</dd>
</dl>

<dl>
<dt>フィルターパラメーターがtrueの場合、文字列の順番を逆にする</dt>
<dd>msg = {{msg}}</dd>
<dd>msg + reverse = {{msg | reverse:true}}</dd>
</dl>

</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.num = 10;
	$scope.str = 'あいうえお';
	$scope.msg = 'あいうえお';
}]);

myApp.filter('addNumber', function(){
	return function(_input, _value){
		return _input + _value;
	};
});

myApp.filter('addString', function(){
	return function(_input, _value){
		return _input + _value;
	};
});

myApp.filter('reverse', function(){
	return function(_input, _value){
		var _str = '';
		if(_value){
			for( var i=0; i<_input.length; i++ ){
				_str = _input.charAt(i) + _str;
			}
		}
		else{
			_str = _input;
		}
		return _str;
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/13/