09. Filtre personnalisé

Terminons par la création d'un filtre personnalisé qui nous permettra de suivre depuis la liste des séries, notre progression.

Création du filtre

Comme pour notre directive personnalisée, nous allons créer un répertoire filter dans le module show et y placer notre filtre dans le fichier progressFilter.

 // src/modules/show/filter/progressFilter.js
'use strict';

app.filter('progress', function () {
    return function (seasons) {
        var count = [0, 0];

        if (seasons) {
            var i = seasons.length;
            while(i--){
                if (seasons[i].episodes) {
                    var j = seasons[i].episodes.length;
                    while(j--){
                        if (seasons[i].episodes[j].view) count[0]++;
                        count[1]++;
                    }
                }
            }
        }
        return count[0] + '/' + count[1];
    };
});

La fonction filter prend en premier argument le nom du filtre et en deuxième une fonction qui retourne une fonction. La fonction retournée aura comme paramètre la variable sur laquelle s’applique le filtre et retournera la valeur souhaitée.

Utilisation du filtre

Nous allons ajouter dans la liste des séries, une colonne permettant de voir la progression par l'intermédiaire du filtre.

<tbody>
    <tr ng-repeat="show in listCtrl.shows">
        <td>{{show.id}}</td>
        <td>{{show.title}}</td>
        <td>{{show.seasons.length || 0}}</td>
        <td>{{show.seasons | progress}}</td>
        <td style="padding:1px">
            <!-- lien vers la page edit pour modifier un élément -->
            <a href="#show/{{show.id}}" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-edit"></span></a>
            <!-- lien pour supprimer un élément -->
            <a ng-click="listCtrl.deleteShow(show.id)" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-trash"></span></a>
        </td>
    </tr>
</tbody>