Nach mehreren Feldern in Angular sortieren

Question

Wie sortiere ich in Angular gleichzeitig nach mehreren Feldern? zuerst 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 möchte dies anzeigen als

Gruppe : Untergruppe

1 - 1

1 - 2

1 - 20

2 - 1

2 - 10

2 - 11

Answer 1

Ich habe dieses praktische Stück geschrieben, um nach mehreren Spalten / Eigenschaften eines Objekts zu sortieren. Bei jedem nachfolgenden Klick auf eine Spalte speichert der Code die zuletzt geklickte Spalte und fügt sie einer wachsenden Liste von geklickten Spaltennamen hinzu, die in einem Array namens sortArray platziert werden. Der integrierte Angular "orderBy" Filter liest einfach die sortArray-Liste und ordnet die Spalten gemäß der darin gespeicherten Reihenfolge der Spaltennamen. Der zuletzt geklickte Spaltenname wird zum primären sortierten Filter, der zuvor geklickte wird der nächste in der Präzedenz usw. Die umgekehrte Reihenfolge beeinflusst die Reihenfolge aller Spalten auf einmal und schaltet aufsteigende / absteigende Reihenfolge für die vollständige Array-Liste um:

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

        NAME▼▲
        FISH▼▲
        TASTINESS▼▲

        {{ s.name }}
        {{ s.fish }}
        {{ s.tastiness }}

Answer 2

Erstellt Pipe zum Sortieren. Akzeptiert sowohl Strings als auch Arrays von Strings und sortiert nach mehreren Werten. Funktioniert für Angular (nicht AngularJS). Unterstützt sowohl Sortierung für Strings als auch 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
            }
        });
    }
}

Answer 3

Stellen Sie sicher, dass die Sortierung für den Endbenutzer nicht zu kompliziert ist. Ich habe immer gedacht, dass das Sortieren nach Gruppe und Untergruppe ein wenig kompliziert zu verstehen ist. Wenn es sich um einen technischen Endbenutzer handelt, könnte es in Ordnung sein.