Two of the most basic built-in filters are uppercase and lowercase filters, and they can be used in the following fashion.
Suppose that you define the following controller in your application:
(app.js)
angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
$scope.data = {
text: 'The QUICK brown Fox JUMPS over The LAZY dog',
nums: '0123456789',
specialChars: '!@#$%^&*()',
whitespace: ' '
};
});You will then be able to use the filters in the template by passing them via the pipe operator, as follows:
(index.html)
<div ng-app="myApp">
<div ng-controller="Ctrl">
<p>{{ data.text | uppercase }}</p>
<p>{{ data.nums | uppercase }}</p>
<p>{{ data.specialChars | uppercase }}</p>
<p>_{{ data.whitespace | uppercase }}_</p>
</div>
</div>The output rendered will be as follows:
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG...