AngularJS TIPS
文字列を大文字／小文字に変換するには？（lowercase／uppercase）
2015年7月21日
lowercase／uppercaseフィルターを使って文字列を大文字や小文字に変換する方法を解説。また、JavaScriptコードから変換する場合に使える$filterサービスとangular.lowercase／angular.uppercaseメソッドについても紹介する。
文字列を大文字／小文字と変換するには、それぞれlowercase／uppercaseフィルターを利用します。
HTML
|
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<div ng-init="name = 'Webデリ - Spicy Tools, Delicious Sites.'">
<p>
変換前：{{name}}
</p>
<p>
小文字：{{name | lowercase}}
</p>
<p>
大文字：{{name | uppercase}}
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
|
文字列を大文字／小文字に変換するためのコード： lowercase／uppercaseフィルター使用（upper_lower.html）
▼
|
変換前：Webデリ - Spicy Tools, Delicious Sites.
小文字：webデリ - spicy tools, delicious sites.
大文字：WEBデリ - SPICY TOOLS, DELICIOUS SITES.
|
Webブラウザーでの表示結果
JavaScriptコードから呼び出すならば、$filterサービスを利用して、以下のように表すこともできます。
HTML
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<p>
変換前：{{name}}
</p>
<p>
小文字：{{lower}}
</p>
<p>
大文字：{{upper}}
</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', '$filter', function($scope, $filter) {
$scope.name = 'Webデリ - Spicy Tools, Delicious Sites.';
$scope.lower = $filter('lowercase')($scope.name);
$scope.upper = $filter('uppercase')($scope.name);
}]);
</script>
</body>
</html>
|
JavaScriptから大文字／小文字に変換するためのコード： $filterサービス使用（upper_lower_js.html）
また、angularオブジェクトからlowercase／uppercaseメソッドを呼び出しても構いません。一般的には、$filterサービスをインジェクトするよりも、こちらの方がシンプルです。
JavaScript
|
angular.module('myApp', [])
.controller('MyController', ['$scope', '$filter', function($scope, $filter) {
$scope.name = 'Webデリ - Spicy Tools, Delicious Sites.';
$scope.lower = angular.lowercase($scope.name);
$scope.upper = angular.uppercase($scope.name);
}]);
</script>
|
JavaScriptから大文字／小文字に変換するためのコード： angular.lowercase／angular.uppercaseメソッド使用（upper_lower_js.html）
処理対象：大文字／小文字 カテゴリ：基本
処理対象：フィルターコンポーネント カテゴリ：基本
処理対象：サービスコンポーネント カテゴリ：基本
処理対象：関数コンポーネント カテゴリ：基本
API：uppercase｜lowercase カテゴリ：ng（コアモジュール） > filter components（フィルターコンポーネント）
API：$filter カテゴリ：ng（コアモジュール） > service components（サービスコンポーネント）
API：angular.lowercase｜angular.uppercase カテゴリ：ng（コアモジュール） > function components（関数コンポーネント）
処理対象：フィルターコンポーネント カテゴリ：基本
処理対象：サービスコンポーネント カテゴリ：基本
処理対象：関数コンポーネント カテゴリ：基本
API：uppercase｜lowercase カテゴリ：ng（コアモジュール） > filter components（フィルターコンポーネント）
API：$filter カテゴリ：ng（コアモジュール） > service components（サービスコンポーネント）
API：angular.lowercase｜angular.uppercase カテゴリ：ng（コアモジュール） > function components（関数コンポーネント）
※以下では、本稿の前後を合わせて5回分（第16回～第20回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
16. 別ファイルやJavaScriptでメッセージを管理するには？（ng-message-include／ng-message-exp）
ng-messages属性で使用するメッセージを、ページ内でテンプレート化したり、外部ファイル化したりして効率的に管理する方法を説明する。
17. 入力値のモデルへの反映タイミングを変更するには？（ng-model-options）
AngularJSのデータバインディング機能により入力値がモデルに反映されるのを、指定したミリ秒数後やフォーカスが外れたときまで遅延させる方法を説明する。
18. 【現在、表示中】≫ 文字列を大文字／小文字に変換するには？（lowercase／uppercase）
lowercase／uppercaseフィルターを使って文字列を大文字や小文字に変換する方法を解説。また、JavaScriptコードから変換する場合に使える$filterサービスとangular.lowercase／angular.uppercaseメソッドについても紹介する。
