Skip to content

Instantly share code, notes, and snippets.

@anonymoussc
Created October 27, 2015 08:45
Show Gist options
  • Save anonymoussc/d794e6eba196e8c892fe to your computer and use it in GitHub Desktop.
Save anonymoussc/d794e6eba196e8c892fe to your computer and use it in GitHub Desktop.
Using Localized Filter Formatting
<html ng-app="exampleApp">
<head>
<title>Filters</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_fr-fr.js"></script>
<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}
];
$scope.getExpiryDate = function(days) {
var now = new Date();
return now.setDate(now.getDate() + days);
}
});
</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>{{getExpiryDate(p.expiry) | date:"shortDate"}}</td>
<td class="text-right">{{p.price | currency }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment