<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<!-- Angular Controller -->
<div ng-controller="UsersCtrl">
<div class="row">
<div class="col-xs-12 table-responsive">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>
<a href="#" ng-click="orderByField='username'; reverseSort = !reverseSort">
Pseudo
<span ng-show="orderByField == 'username'">
<span ng-show="!reverseSort"><i class="fa fa-caret-up"></i></span>
<span ng-show="reverseSort"><i class="fa fa-caret-down"></i></span>
</span>
</a>
</th>
<th ng-if="formData.email">
<a href="#" ng-click="orderByField='email'; reverseSort = !reverseSort">
Email
<span ng-show="orderByField == 'email'">
<span ng-show="!reverseSort"><i class="fa fa-caret-up"></i></span>
<span ng-show="reverseSort"><i class="fa fa-caret-down"></i></span>
</span>
</a>
</th>
<th ng-if="formData.confirmed">
<a href="#" ng-click="orderByField='confirmed'; reverseSort = !reverseSort">
Statut
<span ng-show="orderByField == 'confirmed'">
<span ng-show="!reverseSort"><i class="fa fa-caret-up"></i></span>
<span ng-show="reverseSort"><i class="fa fa-caret-down"></i></span>
</span>
</a>
</th>
</tr>
</thead>
<tr ng-repeat="user in users | orderBy:orderByField:reverseSort">
<td class="row-title col-xs-3">
{{ user.username }}
</td>
<td class="col-xs-2" ng-if="formData.email">{{ user.email }}</td>
<td class="col-xs-2" ng-switch="user.confirmed" ng-if="formData.confirmed">
<span ng-switch-when="0">Hors ligne</span>
<span ng-switch-when="1">Activé</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- End Angular Controller -->
</body>
</html>
(function() {
//Création de l'app qui doit être chargée au lancement de la page dans <html>
var app = angular.module('app', ['angularDigits']);
//Controller pour afficher la liste des membres
app.controller("UsersCtrl", function($scope, $http)
{
$scope.orderByField = 'id | digits';
$scope.reverseSort = false;
//Chargement des données
$scope.users = [{
"username" : "aaa",
"email" : "aaa",
"id": 1,
"confirmed" : 1
},{
"username" : "bbb",
"email" : "bbb",
"id": 2,
"confirmed" : 0
},{
"username" : "ccc",
"email" : "ccc",
"id": 3,
"confirmed" : 1
}
];
//Sauvegarde les checkbox des options d'affichage du tableau
$scope.formData = {
"email": true,
"confirmed": true
};
});
//Fonction pour afficher les id sur 3 digits
angular.module('angularDigits', []).
filter('digits', function() {
return function(input) {
if (input < 100) {
if (input < 10) input = '00' + input;
else input = '0' + input;
}
return input;
}
});
})(window.angular);
/* Styles go here */