order Przez wiele pól w Angular

382

Jak sortować, używając wielu pól jednocześnie pod kątem? pięść według grupy, a następnie według podgrupy na przykład

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

Chciałem wyświetlić to jako

grupa: podgrupa

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'" />
gmeka
źródło

Odpowiedzi:

659

Zobacz to:

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

<div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>
Pulchny chłopiec
źródło
137
orderBy:['-group','sub']do sortowania groupw odwrotnej kolejności.
Dmitriy
1
Czy pole grupy ma priorytet, aby być pierwszym na liście Sortuj według listy?
luchosrock,
5
@luchosrock, tak, zgodnie z oczekiwaniami. Gra z dostarczonym jsfiddle łatwo potwierdza, że ​​priorytet sortowania jest od lewej do prawej dla podanych pól sortowania.
Patrick Refondini
2
Zauważ, że opcjonalny parametr reverseOrder nie obsługuje tablicy, podobnie jak parametr param, ale możesz ją pominąć i zamiast tego podać porządek sortowania dla każdego elementu tablicy, aby były one odwracane (lub nie) oddzielnie. Przykład: orderBy: ['group', '-sub'] posortuje według grupy w normalny sposób, a następnie według sub w odwrotnej kolejności. W ten sposób można uzyskać złożone kombinacje.
Daniel Nalbach,
1
W naszym sklepie zasymulowaliśmy priorytet, nadając elementom tablicy wartość boolowską, a następnie wykorzystując ją jako pierwszą opcję. Przykład: orderBy: ['-featured', 'title'], co spowodowało, że wyróżnione prawdziwe elementy znalazły się na górze (alfabetycznie), a następnie pozostałe elementy wymienione alfabetycznie.
Daniel Nalbach,
47

Jeśli chcesz sortować według wielu pól wewnątrz kontrolera, użyj tego

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

Zobacz także https://docs.angularjs.org/api/ng/filter/orderBy

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

Tablica użytkownika zamiast wielu zamówień BY

Thambuleena
źródło
5

Sortowania można dokonać za pomocą filtra „orderBy” w układzie kątowym.

Dwa sposoby: 1. Z widoku 2. Z kontrolera

  1. Z widoku

Składnia:

{{array | orderBy : expression : reverse}} 

Na przykład:

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

Składnia:

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

Na przykład:

$scope.filteredArray = $filter.orderBy($scope.users, ['name', 'age'], true);
Tessy Thomas
źródło
5

Istnieją dwa sposoby wykonywania filtrów AngularJs, jeden w HTML przy użyciu {{}} i jeden w rzeczywistych plikach JS ...

Możesz rozwiązać problem za pomocą:

{{ Expression | orderBy : expression : reverse}}

jeśli użyjesz go w HTML lub użyjesz czegoś takiego:

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

Odwrotność jest opcjonalna na końcu, przyjmuje wartość logiczną, a jeśli to prawda, odwróci tablicę dla ciebie, bardzo przydatny sposób na odwrócenie tablicy ...

Alireza
źródło
Również tutaj, aby zobaczyć: docs.quarejs.org/api/ng/filter/orderBy
Alireza
0

Napisałem ten przydatny kawałek do sortowania według wielu kolumn / właściwości obiektu. Przy każdym kolejnym kliknięciu kolumny kod przechowuje ostatnią klikniętą kolumnę i dodaje ją do rosnącej listy nazw ciągów klikanych kolumn, umieszczając je w tablicy o nazwie sortArray. Wbudowany filtr Angular „orderBy” po prostu odczytuje listę sortArray i porządkuje kolumny według kolejności przechowywanych tam nazw kolumn. Tak więc ostatnia kliknięta nazwa kolumny staje się filtrem pierwotnie uporządkowanym, poprzedni kliknął następny z pierwszeństwem itp. Odwrotna kolejność wpływa na kolejność wszystkich kolumn jednocześnie i przełącza rosnąco / malejąco dla kompletnego zestawu list tablic:

<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>
Stokely
źródło
0

Utworzono rurę do sortowania. Akceptuje zarówno ciąg znaków, jak i tablicę ciągów, sortując według wielu wartości. Działa dla Angular (nie AngularJS). Obsługuje zarówno sortowanie według ciągów, jak i liczb.

@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
            }
        });
    }
}
Andris
źródło
1
PS: Właściwie to moim zdaniem nikt obecnie nie odpowiedział na aktualne pytanie, ponieważ dotyczyło to Angulara, a nie AngularJS. Moje rozwiązanie działa od wersji Angular 2. Testowane na wersji Angular 7.2.15
Andris
Powinieneś rozważyć a) kiedy zadano to pytanie, oraz b) kiedy po raz pierwszy ogłoszono Angular 2.
Nick
@ andris Czy masz gdzieś działający przykład kodu od końca do końca hostowany?
Rolling Stone
Przepraszamy, ale nie :(
Andris
-8

Upewnij się, że sortowanie nie jest skomplikowane dla użytkownika końcowego. Zawsze myślałem, że sortowanie według grup i podgrup jest trochę skomplikowane do zrozumienia. Jeśli jest to techniczny użytkownik końcowy, może być OK.

Jens Alenius
źródło
To nie jest nawet odpowiedni „komentarz”. Na pewno nie odpowiedź na pytanie
Afshin Moazami
Czy tak źle jest zadawać sobie pytanie, czy obecne podejście jest najlepsze przy tworzeniu GUI? Doświadczenie użytkownika końcowego wydaje mi się istotne
Jens Alenius
Istnieje wiele scenariuszy, w których sortowanie według wielu właściwości ułatwia użytkownikowi zrozumienie organizacji. Zasadniczo grupujesz rzeczy w kategorie.
Owen Johnson