orderBy mehrere Felder in Angular

Wie sortiere ich, indem ich mehrere Felder gleichzeitig im Winkel verwende? Faust nach Gruppe und dann nach Untergruppe zum Beispiel

$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}];

Ich wollte dies als anzeigen

Gruppe: Untergruppe

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'" />

Bitte sehen Sie dies:

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

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

Wenn Sie nach mehreren Feldern innerhalb des Controllers sortieren möchten, verwenden Sie diese Option

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

Siehe auch https://docs.angularjs.org/api/ng/filter/orderBy

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

Benutzerarray statt mehrfacher orderBY

Die Sortierung kann mithilfe des Filters 'orderBy' im Winkel erfolgen.

Zwei Möglichkeiten: 1. Aus der Ansicht 2. Aus der Steuerung

1. Aus der Sicht

Syntax:

{{array | orderBy : expression : reverse}} 

Zum Beispiel:

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

2. Vom Controller

Syntax:

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

Zum Beispiel:

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

Es gibt zwei Möglichkeiten, AngularJs-Filter auszuführen, eine im HTML-Code mit {{}} und eine in tatsächlichen JS-Dateien ...

Sie können Ihr Problem lösen, indem Sie:

{{ Expression | orderBy : expression : reverse}}

Wenn Sie es im HTML verwenden oder etwas wie:

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

Die Umkehrung ist am Ende optional, sie akzeptiert einen Booleschen Wert und wenn dies zutrifft, wird das Array für Sie umgekehrt, eine sehr praktische Möglichkeit, Ihr Array umzukehren ...

Ich habe dieses praktische Stück geschrieben, um nach mehreren Spalten / Eigenschaften eines Objekts zu sortieren. Bei jedem aufeinanderfolgenden Spaltenklick speichert der Code die zuletzt angeklickte Spalte und fügt sie einer wachsenden Liste angeklickter Spaltenzeichenfolgennamen hinzu, wobei sie in einem Array namens sortArray platziert werden. Der integrierte Angular-Filter "orderBy" liest einfach die sortArray-Liste und ordnet die Spalten in der Reihenfolge der dort gespeicherten Spaltennamen. Der Name der zuletzt angeklickten Spalte wird also zum primär geordneten Filter, der vorherige zum vorrangigen Filter usw. Die umgekehrte Reihenfolge wirkt sich auf alle Spaltenreihenfolgen gleichzeitig aus und schaltet für den vollständigen Array-Listensatz aufsteigend / absteigend um:

<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>

Pipe zum Sortieren erstellt. Akzeptiert sowohl Zeichenfolgen als auch Array von Zeichenfolgen und sortiert nach mehreren Werten. Funktioniert für Angular (nicht AngularJS). Unterstützt sowohl das Sortieren nach Zeichenfolgen als auch nach Zahlen.

@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
            }
        });
    }
}

Stellen Sie sicher, dass die Sortierung für den Endbenutzer nicht zu kompliziert ist. Ich habe immer gedacht, dass das Sortieren nach Gruppen und Untergruppen etwas kompliziert zu verstehen ist. Wenn es sich um einen technischen Endbenutzer handelt, ist dies möglicherweise in Ordnung.