Angular JS Magazine

vineri, 19 septembrie 2014

Localizing Filter Output - working with locales

The currency, number, and date filters all have support for formatting values using localization rules, which are at here. We have downloaded and used in this example (for currency and date filters) the angular-locale_ro-ro.js (this is specific to Romania):

<!DOCTYPE html>
<html ng-app="atpModule">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <script src="../locales/angular-locale_ro-ro.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("atpModule", [])
                .controller("atpCtrl", function ($scope) {
                    $scope.lastPlayingDate = function () {
                        var now = new Date();
                        return now.setDate(now.getDate() - Math.floor(Math.random(100)*100));
                    }
                });
    </script>
</head>
<body ng-controller="atpCtrl">
<div ng-app="" ng-init="atp=[
     { name: 'Nadal, Rafael (ESP)', birth: '03.06.1986', rank: 1, prizemoney: '66149345' },
     { name: 'Djokovic, Novak (SRB)', birth: '22.05.1987', rank: 2, prizemoney: '70704129' },
     { name: 'Federer, Roger (SUI)', birth: '08.08.1981', rank: 3, prizemoney: '84827704' },
     { name: 'Wawrinka, Stan (SUI)', birth: '28.03.1985', rank: 4, prizemoney: '13155060' },
     { name: 'Ferrer, David (ESP)', birth: '02.04.1982', rank: 5, prizemoney: '24034072' }]">

    <div id="atpPanel" class="panel">
        <h3 class="panel-header">ATP SINGLES RANKINGS</h3>
        <table class="table">
            <thead>
            <tr>
                <th>Name</th>
                <th>Last Playing</th>
                <th>Rank</th>
                <th>Prize Money</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in atp">
                <td>{{item.name}}</td>
                <td>{{lastPlayingDate() | date:"shortDate"}}</td>
                <td>{{item.rank}}</td>
                <td>{{item.prizemoney | currency}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

Without roumanian locale file:
With roumanian locale file: