AngularJSのフィルターを使ってみる

AngularJSのフィルター周りを試してみます。

uppercaseとlowercase

大文字や小文字に統一します。

HTML

<div ng-controller="sampleCtrl">
	<p>■そのまま表示</p>
	<ul>
		<li ng-repeat="character in loveplus">
			{{character}}
		</li>
	</ul>
	<p>■uppercase</p>
	<ul>
		<li ng-repeat="character in loveplus">
			{{character | uppercase}}
		</li>
	</ul>
	<p>■lowercase</p>
	<ul>
		<li ng-repeat="character in loveplus">
			{{character | lowercase}}
		</li>
	</ul>
</div>

JavaScript

var SampleCtrl = function ($scope) {
	$scope.loveplus = ['Takane Manaka', 'kobayakawa rinko', 'ANEGASAKI NENE'];
};
var appModule = angular.module('app', []);
appModule.controller('sampleCtrl', SampleCtrl);

uppercaseとlowercaseのデモページ

numberとcurrency

3桁ごとの「,」追加や小数点以下の制御、通貨の表示を行います。

HTML

<div ng-controller="sampleCtrl">
	<p>■そのまま表示</p>
	<ul>
		<li ng-repeat="item in items">
			{{item.name}} : {{item.price}}
		</li>
	</ul>
	<p>■number</p>
	<ul>
		<li ng-repeat="item in items">
			{{item.name}} : {{item.price | number}}
		</li>
	</ul>
	<p>■number:2</p>
	<ul>
		<li ng-repeat="item in items">
			{{item.name}} : {{item.price | number: 2}}
		</li>
	</ul>
	<p>■currency</p>
	<ul>
		<li ng-repeat="item in items">
			{{item.name}} : {{item.price | currency}}
		</li>
	</ul>
</div>

JavaScript

var SampleCtrl = function ($scope) {
	$scope.items = [
		{name: 'NEW GAME! (1)', price: '885'},
		{name: 'ひぐらしのなく頃に粋', price: '5963'},
		{name: '冴えない彼女の育てかた-blessing flowers- (通常版)', price: '5300'},
		{name: 'SHIROBAKO 第6巻', price: '6233'},
		{name: 'PlayStation Vita Wi-Fiモデル ブラック', price: '19418'}
	];
};
var appModule = angular.module('app', []);
appModule.controller('sampleCtrl', SampleCtrl);

numberとcurrencyのデモページ

date

日付のフォーマットの変更を行います。

HTML

<div ng-controller="sampleCtrl">
	<p>■そのまま表示</p>
	<div>{{days}}</div>

	<p>■date</p>
	<div>{{days | date}}</div>

	<p>■date: 'MMMM.dd.yyyy (EEEE)'</p>
	<div>{{days | date: 'MMMM.dd.yyyy (EEEE)'}}</div>

	<p>■date: 'MMM.dd.yyyy (EEE)'</p>
	<div>{{days | date: 'MMM.dd.yyyy (EEE)'}}</div>

	<p>■date: 'yyyy年MM月dd日 HH時mm分ss秒'</p>
	<div>{{days | date: 'yyyy年MM月dd日 HH時mm分ss秒'}}</div>

	<p>■date: 'yy.M.d (a) hh:mm:ss.sss'</p>
	<div>{{days | date: 'yy.M.d (a) hh:mm:ss.sss'}}</div>
</div>

JavaScript

var SampleCtrl = function ($scope) {
	$scope.days = new Date();
};
var appModule = angular.module('app', []);
appModule.controller('sampleCtrl', SampleCtrl);

dateのデモページ

年

月

日

曜日

時

分

秒

他

limitToとorderByとfilter

主にng-repeatで使用するフィルター(表示数制限、並び替え、絞り込み)を試してみます。

HTML

<div ng-controller="sampleCtrl">
	<p>■そのまま表示</p>
	<ul>
		<li ng-repeat="character in imas">
			{{character.name}} {{character.age}}才 {{character.height}}cm
		</li>
	</ul>
	<p>■limitTo: 3</p>
	<ul>
		<li ng-repeat="character in imas | limitTo: 3">
			{{character.name}} {{character.age}}才 {{character.height}}cm
		</li>
	</ul>
	<p>■orderBy: 'height'</p>
	<ul>
		<li ng-repeat="character in imas | orderBy: 'height'">
			{{character.name}} {{character.age}}才 {{character.height}}cm
		</li>
	</ul>
	<p>■orderBy: '-height' limitTo: 5</p>
	<ul>
		<li ng-repeat="character in imas | orderBy: '-height' | limitTo: 5">
			{{character.name}} {{character.age}}才 {{character.height}}cm
		</li>
	</ul>
	<p>■orderBy: 'height':true limitTo: 5</p>
	<ul>
		<li ng-repeat="character in imas | orderBy: 'height':true | limitTo: 5">
			{{character.name}} {{character.age}}才 {{character.height}}cm
		</li>
	</ul>
	<p>■filter:search</p>
	<div><input type="text" ng-model="search" placeholder="検索文字列を入力"></div>
	<ul>
		<li ng-repeat="character in imas | filter:search">
			{{character.name}} {{character.age}}才 {{character.height}}cm
		</li>
	</ul>
	<p>■filter:search2</p>
	<div><input type="text" ng-model="search2.name" placeholder="名前を入力"></div>
	<ul>
		<li ng-repeat="character in imas | filter:search2">
			{{character.name}} {{character.age}}才 {{character.height}}cm
		</li>
	</ul>
</div>

JavaScript

var SampleCtrl = function ($scope) {
	$scope.imas = [
		{name: 'Uzuki Shimamura', age: 17, height: 159},
		{name: 'Rin Shibuya', age: 15, height: 165},
		{name: 'Mio Honda', age: 15, height: 161},
		{name: 'Miria Akagi', age: 11, height: 140},
		{name: 'Anastasia', age: 15, height: 165},
		{name: 'Chieri Ogata', age: 16, height: 153},
		{name: 'Ranko Kanzaki', age: 14, height: 156},
		{name: 'Rika Jougasaki', age: 12, height: 149},
		{name: 'Riina Tada', age: 17, height: 152},
		{name: 'Minami Nitta', age: 19, height: 165},
		{name: 'Anzu Futaba', age: 17, height: 139},
		{name: 'Miku Maekawa', age: 15, height: 152},
		{name: 'Kanako Mimura', age: 17, height: 153},
		{name: 'Kirari Moroboshi', age: 17, height: 186.2}
	];
};
var appModule = angular.module('app', []);
appModule.controller('sampleCtrl', SampleCtrl);

limitToとorderByとfilterのデモページ

i18nのファイルを使用する

currencyの通貨やdateの曜日を日本向けにしてみます。

AngularJS公式サイトからAngularJSをzip形式でダウンロードすると、フォルダ内にangular-locale_ja-jp.jsというファイルが含まれています。
このファイルをAngularJSの後に読み込ませるようにします。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="angular-locale_ja-jp.js"></script>

HTML

<div ng-controller="sampleCtrl">
	<p>■そのまま表示</p>
	<ul>
		<li ng-repeat="item in items">
			{{item.name}} : {{item.price}}
		</li>
	</ul>
	<p>■currency</p>
	<ul>
		<li ng-repeat="item in items">
			{{item.name}} : {{item.price | currency}}
		</li>
	</ul>


	<p>■そのまま表示</p>
	<div>{{days}}</div>
	<p>■date</p>
	<div>{{days | date}}</div>
	<p>■date: 'MMMM.dd.yyyy (EEEE)'</p>
	<div>{{days | date: 'MMMM.dd.yyyy (EEEE)'}}</div>
	<p>■date: 'MMM.dd.yyyy (EEE)'</p>
	<div>{{days | date: 'MMM.dd.yyyy (EEE)'}}</div>
</div>

JavaScript

var SampleCtrl = function ($scope) {
	$scope.items = [
		{name: 'NEW GAME! (1)', price: '885'},
		{name: 'ひぐらしのなく頃に粋', price: '5963'},
		{name: '冴えない彼女の育てかた-blessing flowers- (通常版)', price: '5300'},
		{name: 'SHIROBAKO 第6巻', price: '6233'},
		{name: 'PlayStation Vita Wi-Fiモデル ブラック', price: '19418'}
	];
	$scope.days = new Date();
};
var appModule = angular.module('app', []);
appModule.controller('sampleCtrl', SampleCtrl);

これでcurrencyの通貨が「\」に、dateの曜日が日本語になります。
日本向けに変更したデモページ
　

【参考サイト】

• AngularJS: API: API Reference
• AngularJS入門 (全12回) – プログラミングならドットインストール
• AngularJS使い方メモ – Qiita