In AngularJS, the uppercase and lowercase filters are used to convert text to all uppercase or all lowercase letters. These filters help in formatting text dynamically in templates without modifying the original data.
1. Syntax of uppercase and lowercase Filters
The filters are applied using the pipe (|) symbol inside expressions.
{{ expression | uppercase }}
{{ expression | lowercase }}
uppercase → Converts text to ALL CAPITAL LETTERS
lowercase → Converts text to all small letters
2. Using uppercase and lowercase in Expressions
You can apply these filters directly inside AngularJS expressions in HTML.
Example: Converting Static Text
<p>{{ "hello world" | uppercase }}</p> <!-- Output: HELLO WORLD -->
<p>{{ "HELLO WORLD" | lowercase }}</p> <!-- Output: hello world -->
3. Using Filters with Variables in AngularJS
Filters can be used with dynamic data in an AngularJS controller.
Example: Applying Filters to Scope Variables
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TextController">
<h2>Uppercase and Lowercase Filters Example</h2>
<p>Original Text: {{ text }}</p>
<p>Uppercase: {{ text | uppercase }}</p>
<p>Lowercase: {{ text | lowercase }}</p>
<script>
var app = angular.module('myApp', []);
app.controller('TextController', function($scope) {
$scope.text = "AngularJS Filters are Powerful";
});
</script>
</body>
</html>
Output:
Original Text: AngularJS Filters are Powerful
Uppercase: ANGULARJS FILTERS ARE POWERFUL
Lowercase: angularjs filters are powerful
4. Using Filters with Input Fields (ng-model)
Filters can be used with user input to transform text dynamically.
Example: Converting User Input to Uppercase/Lowercase
<input type="text" ng-model="userInput" placeholder="Type something">
<p>Uppercase: {{ userInput | uppercase }}</p>
<p>Lowercase: {{ userInput | lowercase }}</p>
Whenever the user types, the text is displayed in both uppercase and lowercase formats.
5. Using Filters in ng-repeat
Filters can be applied inside ng-repeat to transform list items.
Example: Displaying Names in Different Formats
<ul>
<li ng-repeat="name in names">
Original: {{ name }} <br>
Uppercase: {{ name | uppercase }} <br>
Lowercase: {{ name | lowercase }}
</li>
</ul>
var app = angular.module('myApp', []);
app.controller('NameController', function($scope) {
$scope.names = ["John Doe", "Jane Smith", "Mark Wright"];
});
Output:
- Original: John Doe → Uppercase: JOHN DOE → Lowercase: john doe
- Original: Jane Smith → Uppercase: JANE SMITH → Lowercase: jane smith
6. Using Filters in Directives (ng-options)
Filters can also be used with ng-options to format dropdown options.
Example: Dropdown with Uppercase/Lowercase Conversion
<select ng-model="selectedName" ng-options="name | uppercase for name in names">
<option value="">Select a Name</option>
</select>
<p>Selected Name: {{ selectedName | lowercase }}</p>
Dropdown options are displayed in uppercase, but selected value is shown in lowercase.
7. Using Filters in Controllers ($filter Service)
Filters can be applied inside controllers using the $filter service.
Example: Converting Text in a Controller
app.controller('FilterController', function($scope, $filter) {
var originalText = "AngularJS is Amazing!";
$scope.uppercaseText = $filter('uppercase')(originalText);
$scope.lowercaseText = $filter('lowercase')(originalText);
});
This allows text transformation before displaying it in the UI.
8. Chaining Multiple Filters
Multiple filters can be applied together.
Example: Trimming and Converting to Uppercase
<p>{{ " hello world " | trim | uppercase }}</p>
If AngularJS does not have a trim filter by default, you can create a custom filter.
9. Custom Filters for More Control
You can create custom filters that modify text beyond just uppercase/lowercase.
Example: Custom Capitalize Filter
app.filter('capitalize', function() {
return function(input) {
if (!input) return '';
return input.replace(/\b\w/g, function(letter) {
return letter.toUpperCase();
});
};
});
Usage in HTML
<p>{{ "angularjs filters example" | capitalize }}</p>
<!-- Output: Angularjs Filters Example -->