web-dev-qa-db-fra.com

orderBy plusieurs champs dans Angular

Comment trier en utilisant plusieurs champs à la fois en angulaire? poing par groupe puis par sous-groupe pour Exemple

$scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1},
    {'group':2,'sub':11}];

Je voulais afficher ceci comme

groupe: sous-groupe

1 - 1

1 - 2

1 - 20

2 - 1

2 - 10

2 - 11

<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:'group' | orderBy:'sub'" />
javascriptangularjssortingangularjs-ng-repeatangularjs-orderby
357
gmeka

S'il vous plaît voir ceci:

http://jsfiddle.net/JSWorld/Hp4W7/32/

<div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>
620
Sabarish Sankar

Si vous voulez trier des champs multiples dans le contrôleur, utilisez ceci 

$filter('orderBy')($scope.property_list, ['firstProp', 'secondProp']);

Voir aussi https://docs.angularjs.org/api/ng/filter/orderBy

45
Muhammad Raza Dar
<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:['group','sub']" />

Tableau d'utilisateurs au lieu de plusieurs orderBY

21
Thambuleena

Le tri peut être effectué à l'aide du filtre 'orderBy' en mode angulaire.

Deux manières: 1. De la vue 2. De contrôleur

  1. De vue

Syntaxe:

{{array | orderBy : expression : reverse}}

Par exemple:

 <div ng-repeat="user in users | orderBy : ['name', 'age'] : true">{{user.name}}</div>
  1. Du contrôleur

Syntaxe:

$filter.orderBy(array, expression, reverse);

Par exemple:

$scope.filteredArray = $filter.orderBy($scope.users, ['name', 'age'], true);
5
Tessy Thomas

Il y a 2 manières de faire des filtres AngularJs, une dans le HTML en utilisant {{}} et une dans les fichiers JS réels ...

Vous pouvez résoudre votre problème en utilisant:

{{ Expression | orderBy : expression : reverse}}

si vous l'utilisez dans le code HTML ou utilisez quelque chose comme:

$filter('orderBy')(yourArray, yourExpression, reverse)

L'inverse est facultatif à la fin, il accepte un booléen et si c'est vrai, il inversera le tableau pour vous, très pratique pour inverser votre tableau ...

5
Alireza

Créé Pipe pour le tri. Accepte à la fois la chaîne et le tableau de chaînes, triant selon plusieurs valeurs. Fonctionne pour Angular (pas AngularJS). Prend en charge le tri pour les chaînes et les nombres.

@Pipe({name: 'orderBy'})
export class OrderBy implements PipeTransform {
    transform(array: any[], filter: any): any[] {
        if(typeof filter === 'string') {
            return this.sortAray(array, filter)
        } else {
            for (var i = filter.length -1; i >= 0; i--) {
                array = this.sortAray(array, filter[i]);
            }

            return array;
        }
    }

    private sortAray(array, field) {
        return array.sort((a, b) => {
            if(typeof a[field] !== 'string') {
                a[field] !== b[field] ? a[field] < b[field] ? -1 : 1 : 0
            } else {
                a[field].toLowerCase() !== b[field].toLowerCase() ? a[field].toLowerCase() < b[field].toLowerCase() ? -1 : 1 : 0
            }
        });
    }
}
0
Andris

J'ai écrit cette pièce pratique pour trier selon plusieurs colonnes/propriétés d'un objet. Chaque fois que vous cliquez sur une colonne, le code stocke la dernière colonne sur laquelle vous avez cliqué et l'ajoute à une liste croissante de noms de chaînes de colonnes sur lesquels vous avez cliqué, en les plaçant dans un tableau appelé sortArray. Le filtre Angular "orderBy" intégré lit simplement la liste sortArray et classe les colonnes en fonction de l'ordre des noms de colonne qui y sont stockés. Ainsi, le dernier nom de colonne sélectionné devient le filtre ordonné principal, le filtre précédent a été sélectionné en priorité, etc. L'ordre inverse affecte l'ordre de toutes les colonnes en même temps et bascule en ordre croissant ou décroissant pour l'ensemble de la liste de tableaux:

<script>
    app.controller('myCtrl', function ($scope) {
        $scope.sortArray = ['name'];
        $scope.sortReverse1 = false;
        $scope.searchProperty1 = '';
        $scope.addSort = function (x) {
            if ($scope.sortArray.indexOf(x) === -1) {
                $scope.sortArray.splice(0,0,x);//add to front
            }
            else {
                $scope.sortArray.splice($scope.sortArray.indexOf(x), 1, x);//remove
                $scope.sortArray.splice(0, 0, x);//add to front again
            }
        };
        $scope.sushi = [
        { name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
        { name: 'Philly', fish: 'Tuna', tastiness: 2 },
        { name: 'Tiger', fish: 'Eel', tastiness: 7 },
        { name: 'Rainbow', fish: 'Variety', tastiness: 6 },
        { name: 'Salmon', fish: 'Misc', tastiness: 2 }
        ];
    });
</script>
<table style="border: 2px solid #000;">
<thead>
    <tr>
        <td><a href="#" ng-click="addSort('name');sortReverse1=!sortReverse1">NAME<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
        <td><a href="#" ng-click="addSort('fish');sortReverse1=!sortReverse1">FISH<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
        <td><a href="#" ng-click="addSort('tastiness');sortReverse1=!sortReverse1">TASTINESS<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="s in sushi | orderBy:sortArray:sortReverse1 | filter:searchProperty1">
        <td>{{ s.name }}</td>
        <td>{{ s.fish }}</td>
        <td>{{ s.tastiness }}</td>
    </tr>
</tbody>
</table>
0
Stokely