Discussion :

[Spartacusply]

Bonjour,

bon là j'avoue je sèche. Je cherche à faire un tri sur un tableau en angularjs quand on clique sur les entêtes d'un tableau, jusque là ça va c'est pas un problème, même si les tris sont différents en fonction des colonnes avec une fonction custom ça passe sans problème.

Le truc que j'arrive pas à gérer c'est que je voudrais rajouter un second tri en cas d'égalité. Et là ça passe pas, vu que la fonction ne prend qu'un seul élément en paramètre.

Ce qui serait vraiment top en fait pour moi c'est une fonction qui prend deux éléments du tableau en paramètre, je fais mon truc et je renvoi -1 si c'est le premier plus grand que le deuxième, 0 en cas d'égalité, et 1 si le second est plus grand que le premier. Comme les fonctions de tri personnalisées en php en fait.

J'espère avoir été assez clair

Merci d'avance pour votre aide.

[Invité]

Salut.

Ton tableau est-il généré par un ng-repeat ? Si oui, on peut ajouter plusieurs filtres avec un pipe dans le ng-repeat.
Donc, si tu créés 2 selects HTML contenant tes critères de filtrage, et bien ils sont "additifs" et feront ce que tu demandes, par l'intermédiaire du ng-repeat.
Je ne sais pas si je me fais comprendre.

Heu par exemple avec un span, mais ça marche aussi avec un Table ...

Si mon tableau de données JSON objets.json est du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"nom":"objet1","categorie":"art","serie":"serieA"},{"nom":"objet2","categorie":"art","serie":"serieB"},{"nom":"objet3","categorie":"dev","serie":"serieA"}]

Alors je crée ma vue comme cela :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <span ng-repeat="objet in objets | filter:q |filter:r">{{objet.nom}} {{objet.categorie}} {{objet.serie}}</span>

et deux selects dans le html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<select ng-model="q">
    <option value="art">art</option>
     <option value="dev">dev</option>
    <option value="dessin">dessin</option>
</select>

et

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<select ng-model="r">
    <option value="serieA">serie a</option>
     <option value="serieB">serie b</option>
</select>

Du coup, si je choisit "art" dans mon premier select HTML, j'obtiens tous les objets de la catégorie "art"; par contre, si en plus dans mon 2 ème select HTML, je choisis la "série a", alors je n'obtiendrais plus que les objets de catégorie "art" de la "série a", le ng-repeat n'affichera plus que ça ...

[Spartacusply]

Merci pour ta réponse mais il ne s'agit pas de filtre mais de tri !

Je souhaite trier mon tableau (qui est en effet sur un ng-repeat) selon une première fonction qui "calcule" le tri qui est en effet un peu complexe. En cas d'égalité sur le résultat de cette première fonction, je souhaiterai pour départager les égalités utiliser une deuxième fonction, elle aussi plutôt complexe (pas tant que ça au final mais disons qu'une fonction est nécessaire).

[Invité]

Heu, Désolé d'avoir répondu à côté, je n'avais pas bien compris.

Ce serait bien de publier ta fonction custom de tri si il y en a une (ou ton premier orderBy dans le ng-repeat, pour voir comment il est fait) et un extrait de ton modèle de données avec les noms des catégories de valeurs à comparer . Oui je comprends mieux maintenant. Ben, les orderBy tu peux les imbriquer aussi, donc ce serait à priori la piste. De plus, tu dis avoir créé une fonction spécifique, ce serait bien de la voir.

A part ça, si je comprends bien, tes orderBy sont déclenchés par un clic sur le titre des colonnes, et ne sont donc pas déclenchés par des selects en HTML ...? Parce que si il faut les imbriquer ce serait peut être mieux des selects en HTML.
Mais je comprends que tu veux que le second tri soies automatique lorsqu'il y a égalité sur le premier critère ...

En somme, la question serait : Peut-on imbriquer 2 orderBy dans le ng-repeat, pointant sur 2 fonctions customs, et quel sera le comportement de ce système, cela va-t-il fonctionner?

Très bonne question, que je testerais peut être tout à l'heure dans une table...

Sinon si on avait un extrait de ton modèle de données ça pourrait être sympa... Mais je le conçois, ce n'est pas obligatoire. On pourrait regarder sur Stackoverflow vu le nb d'exemples

http://stackoverflow.com/questions/1...lds-in-angular

[Spartacusply]

Hello,

je me replonge dans cet épineux problème.

Peut-on imbriquer 2 orderBy dans le ng-repeat, pointant sur 2 fonctions customs ?

C'est exactement ça en somme Après pour la deuxième fonction en cas d'égalité, j'ai trouvé comment simplifier mon cas (en calculant un attribut côté serveur), il me faut trier par 'nb_reviews' en ordre décroissant.

Voilà pour l'instant ce que ça donne côté html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table class="table table-striped">
        <tr>
            <th class="sortable" ng-click="order('name')">
                Nom
                <span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
            </th>
            <th class="sortable" ng-repeat="category in categories| filter:{checked :true}" ng-click="order(category.id)">
                <span ng-bind="category.title"></span>
                <span class="sortorder" ng-show="predicate === category.id" ng-class="{reverse:reverse}"></span>
            </th>
            <th class="sortable" ng-click="order('total')">
                <?= __('Total (/10)') ?>
                <span class="sortorder" ng-show="predicate === 'total'" ng-class="{reverse:reverse}"></span>
            </th>
        </tr>
        <tr class="animate-repeat" target="_self" ng-repeat="golf in golfs| filter:search:strict | orderBy:[orderGolfs,-nb_reviews]:reverse">
            <td><a class="link-golf" target="_self" ng-bind="golf.name + ' ('+golf.nb_reviews+' <?= __('avis') ?>)'" ng-href="<?= $this->request->webroot . 'golf/{{golf.slug}}' ?>"></a></td>
            <td ng-bind="golf.choice[category.id].toFixed(1)" ng-repeat="category in categories| filter:{checked :true}"></td>
            <td class="total-score"><strong ng-bind="golf.total.toFixed(1)"></strong></td>
        </tr>
    </table>

A noté surtout le orderBy:[orderGolfs,-nb_reviews]:reverse qui... ne fonctionne pas comme je le souhaiterais.

Et côté fonctions js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$scope.order = function (predicate) {
        $scope.predicate = predicate;
        $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
    };
 
    $scope.orderGolfs = function(golf) {
        if ($scope.predicate === 'total') {
            res = golf.total.toFixed(1);
        } else if ($scope.predicate === 'name') {
            res = golf.name;
        } else {
            $.each(golf.choice, function (key, item) {
                if (key === $scope.predicate) {
                    res = item;
                    return false;
                }
            });
        }
        //Cas où il n'y pas de résultat et qui doit donc toujours se trouver toujours en dernier. C'est un peu degueu d'ailleurs, si y a une solution pour ça aussi....
        if (res === null) {
            res = 1000000;
            if ($scope.reverse) {
                res = -res;
            }
        }
        return res;
    };