Using Built-in Filters

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.

Image
Image
Image

Table 23.1 Filters that modify expressions in AngularJS templates

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.

Listing 23.3 angular_filters.js: Building a scope that AngularJS filters can use


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   });


Listing 23.4 angular_filters.html: An AngularJS template that implements various types of filters to modify data displayed in the rendered view


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>


Image

Figure 23.2 Using AngularJS filters to modify data before displaying it in the AngularJS view.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset