AngularJS Web Application Development Cookbook

Using the uppercase and lowercase filters

Two of the most basic built-in filters are uppercase and lowercase filters, and they can be used in the following fashion.

How to do it…

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 ...