59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
|
/*
|
||
|
|
* Énoncé:
|
||
|
|
*
|
||
|
|
* 1. Modifier le template de index.html afin de modifier l'affichage des commits
|
||
|
|
* dans la table HTML en utilisant les filtres de base d'Angular.
|
||
|
|
*
|
||
|
|
* Contraintes d'affichage:
|
||
|
|
* - La date du commit devra être affiché au format "dd-mm-yyyy"
|
||
|
|
* - L'afichage du SHA du commit devra être limité à 10 caractères
|
||
|
|
*
|
||
|
|
* ! Pas besoin de modifier le code de app.js !
|
||
|
|
*
|
||
|
|
* 2. Mettre en place les directives et le filtre nécessaire afin d'implémenter
|
||
|
|
* un champ de recherche permettant de filtrer la liste des commits.
|
||
|
|
*
|
||
|
|
* Indice:
|
||
|
|
* - Filtre "filter": https://code.angularjs.org/1.3.15/docs/api/ng/filter/filter
|
||
|
|
*
|
||
|
|
* ! Pas besoin de modifier le code de app.js !
|
||
|
|
*
|
||
|
|
* 3. Implémenter un filtre qui "met en lumière" (change la couleur du fond du texte) les éléments
|
||
|
|
* correspondants à la recherche dans le message de commit.
|
||
|
|
*
|
||
|
|
* Exemple d'usage attendu: {{ 'my text' | highlight:'my' }}
|
||
|
|
*
|
||
|
|
* Indices:
|
||
|
|
* - Le filtre devra rechercher le texte voulu et le remplacer par un fragment de HTML
|
||
|
|
* - Nécessite l'usage du service $sce dans le filtre et de sa méthode $sce.trustAsHtml() https://docs.angularjs.org/api/ngSanitize
|
||
|
|
* - Nécessite également l'utilisation de la directive ng-bind-html plutot que l'utilisation des {{ ... }} https://docs.angularjs.org/api/ng/directive/ngBindHtml
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
var Exo = angular.module('Exo', []);
|
||
|
|
|
||
|
|
Exo.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
|
||
|
|
|
||
|
|
$scope.commits = [];
|
||
|
|
|
||
|
|
$http.get('https://api.github.com/repos/torvalds/linux/commits')
|
||
|
|
.then(function(res) {
|
||
|
|
$scope.commits = res.data;
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
}]);
|
||
|
|
|
||
|
|
Exo.filter('highlight', ['$sce', function($sce) {
|
||
|
|
|
||
|
|
return function(input, needle) {
|
||
|
|
|
||
|
|
if( !angular.isString(input) ) return input;
|
||
|
|
|
||
|
|
var html = '<span style="background: yellow">'+needle+'</span>';
|
||
|
|
return $sce.trustAsHtml(input.replace(needle, html));
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
}]);
|