wake-up-neo.com

orderBy mehrere Felder in Angular

Wie kann man unter Verwendung mehrerer Felder gleichzeitig in eckig sortieren? 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 das 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'" />
357
gmeka

Bitte sehen Sie dies:

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

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

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

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

Benutzerarray statt mehrerer orderBY

21
Thambuleena

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>
  1. Vom Controller

Syntax:

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

Zum Beispiel:

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

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.

5
Alireza

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
            }
        });
    }
}
0
Andris

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