AngularJS provides several different types of filters that enable you to easily format strings, objects, and arrays in AngularJS templates. Table 23.1 lists the built-in filters provided with AngularJS.
Listings 23.3 and 23.4 show how to implement some basic filters in AngularJS. Listing 23.3 implements a controller with JSONObj
, word
, and days
properties. Listing 23.4 implements number
, currency
, date
, json
, limitTo
, uppercase
, and lowercase
filters directly in expressions in the template. Figure 23.2 shows the output of these listings.
01 angular.module('myApp', []).
02 controller('myController', function($scope) {
03 $scope.JSONObj = {title:"myTitle"};
04 $scope.word="Supercalifragilisticexpialidocious";
05 $scope.days=['Monday', 'Tuesday', 'Wednesday',
06 'Thursday', 'Friday'];
07 });
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Filters</title>
05 </head>
06 <body>
07 <div ng-controller="myController">
08 <h2>Basic Filters</h2>
09 Number: {{123.45678|number:3}}<br>
10 Currency: {{123.45678|currency:"$"}}<br>
11 Date: {{1389323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}<br>
12 JSON: {{ JSONObj | json }}<br>
13 Limit Array: {{ days | limitTo:3 }}<br>
14 Limit String: {{ word | limitTo:10 }}<br>
15 Uppercase: {{ word | uppercase | limitTo:10 }}<br>
16 Lowercase: {{ word | lowercase | limitTo:10 }}
17 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
18 <script src="/js/angular_filters.js"></script>
19 </body>
20 </html>