orderBy mehrere Felder in Angular

Wenn Sie mehrere Felder 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 mehrerer orderBY

Die Sortierung kann mithilfe des 'orderBy'-Filters in Winkel erfolgen.

Zwei Wege: 1. Aus Sicht 2. Vom Controller

1. Aus 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-Modus mit {{}} und eine in tatsächlichen JS-Dateien ...

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

{{ Expression | orderBy : expression : reverse}}

wenn Sie es in HTML verwenden oder etwas wie:

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

Die Umkehrung ist am Ende optional, es akzeptiert einen Booleschen Wert. Wenn dies der Fall ist, wird das Array für Sie umgekehrt.

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

Ich habe dieses praktische Stück geschrieben, um nach mehreren Spalten/Eigenschaften eines Objekts zu sortieren. Bei jedem nachfolgenden Spaltenklick speichert der Code die zuletzt angeklickte Spalte und fügt sie einer wachsenden Liste mit Namen der angeklickten Spaltenzeichenfolge hinzu, die in einem Array namens sortArray platziert werden. Der eingebaute Angular-Filter "orderBy" liest einfach die sortArray-Liste und ordnet die Spalten nach der Reihenfolge der dort gespeicherten Spaltennamen. Der zuletzt angeklickte Spaltenname wird also zum primären geordneten Filter, der vorherige hat vorrangig auf den nächsten geklickt. Die umgekehrte Reihenfolge wirkt sich auf alle Spaltenreihenfolgen aus und wechselt für den gesamten Array-Listensatz auf-/absteigend:

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