To prepare for this chapter, I deleted the contents of the angularjs web server folder and installed the angular.js, bootstrap.css, and bootstrap-theme.css files, as described in Chapter 1. I then created a file called filters.html, which you can see in Listing 14-1.
Listing 14-1. The Contents of the filters.html File
<html ng-app=”exampleApp”>
<head>
<title>Filters</title>
<script src=”angular.js”></script>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script>
angular.module(“exampleApp”, [])
.controller(“defaultCtrl”, function ($scope) {
$scope.products = [
{ name: “Apples”, category: “Fruit”, price: 1.20, expiry: 10 },
{ name: “Bananas”, category: “Fruit”, price: 2.42, expiry: 7 },
{ name: “Pears”, category: “Fruit”, price: 2.02, expiry: 6 },
{ name: “Tuna”, category: “Fish”, price: 20.45, expiry: 3 },
{ name: “Salmon”, category: “Fish”, price: 17.93, expiry: 2 },
{ name: “Trout”, category: “Fish”, price: 12.93, expiry: 4 },
{ name: “Beer”, category: “Drinks”, price: 2.99, expiry: 365 },
{ name: “Wine”, category: “Drinks”, price: 8.99, expiry: 365 },
{ name: “Whiskey”, category: “Drinks”, price: 45.99, expiry: 365 }
];
});
</script>
</head>
<body ng-controller=”defaultCtrl”>
<div class=”panel panel-default”>
<div class=”panel-heading”>
<h3>
Products
<span class=”label label-primary”>{{products.length}}</span>
</h3>
</div>
<div class=”panel-body”>
<table class=”table table-striped table-bordered table-condensed”>
<thead>
<tr>
<td>Name</td>
<td>Category</td>
<td>Expiry</td>
<td class=”text-right”>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat=”p in products”>
<td>{{p.name}}</td>
<td>{{p.category}}</td>
<td>{{p.expiry}}</td>
<td class=”text-right”>{{p.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I defined a controller whose scope contains a products array of objects that describe a set of products you might find in a supermarket. The data itself isn’t important, other than there are enough items with shared characteristics to allow me to demonstrate different filtering techniques. I have used the ng-repeat directive to generate rows in a table element to display the product objects, and you can see how the browser displays the filters.html file in Figure 14-1.
■ Note For most of the figures in this chapter, I am going to show you only a few rows from the table; that’s because all of the rows are formatted the same, and I don’t want to waste pages showing you repeating data.
Downloading the Localization File
Some of the built-in filters that I describe in this chapter are capable of formatting data values using localized rules.
To demonstrate how this works, I need to use a file that specifies the rules for a given file.
Go to angularjs.org, click the Download button, and click the Extras link. This will display a list of the files available for AngularJS in an unformatted list. Click the i18n link and locate and save the angular-locale_fr-fr.js file into the angularjs folder. This is the locale file for the French language as used in France (I picked it because it is different enough from the default locale—English as used in the United States—to be obvious in the examples).
You don’t need to do anything with this file at the moment, other than to download it.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.