orderDengan beberapa bidang dalam Angular


382

Bagaimana cara mengurutkan dengan menggunakan beberapa bidang sekaligus dalam sudut? tinju oleh kelompok dan kemudian oleh sub-kelompok untuk Contoh

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

Saya ingin menampilkan ini sebagai

grup: Subkelompok

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

Jawaban:


659

Silakan lihat ini:

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

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

137
orderBy:['-group','sub']untuk menyortir dengan groupurutan terbalik.
Dmitriy

1
Apakah bidang grup mendapat prioritas untuk menjadi yang pertama dalam daftar orderBy?
luchosrock

5
@luchosrock, ya, seperti yang diharapkan. Bermain dengan jsfiddle yang disediakan dengan mudah mengkonfirmasi prioritas sortir dari kiri ke kanan untuk bidang sortir yang disediakan.
Patrick Refondini

2
Perhatikan bahwa parameter reverseOrder opsional tidak mendukung array seperti halnya parameter ekspresi, tetapi Anda dapat menghilangkannya dan sebagai gantinya memberikan urutan sortir pada setiap item array sehingga mereka terbalik (atau tidak) secara terpisah. Contoh: orderBy: ['group', '-s' 'akan mengurutkan berdasarkan grup dalam mode normal, kemudian dengan sub dalam urutan terbalik. Dimungkinkan untuk mendapatkan beberapa kombinasi kompleks dengan cara ini.
Daniel Nalbach

1
Kami mensimulasikan prioritas di toko kami dengan memberikan item array properti boolean, lalu menggunakannya sebagai opsi pertama. Contoh: orderBy: ['-featured', 'title'], yang menyebabkan item true yang ditampilkan berada di bagian atas (berdasarkan abjad), kemudian item yang lainnya terdaftar secara alfabet.
Daniel Nalbach


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

Array pengguna alih-alih beberapa orderBY


5

Penyortiran dapat dilakukan dengan menggunakan filter 'orderBy' di sudut.

Dua cara: 1. Dari tampilan 2. Dari pengontrol

  1. Dari tampilan

Sintaksis:

{{array | orderBy : expression : reverse}} 

Sebagai contoh:

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

Sintaksis:

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

Sebagai contoh:

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

5

Ada 2 cara melakukan filter AngularJs, satu di HTML menggunakan {{}} dan satu di file JS aktual ...

Anda dapat memecahkan masalah Anda dengan menggunakan:

{{ Expression | orderBy : expression : reverse}}

jika Anda menggunakannya dalam HTML atau menggunakan sesuatu seperti:

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

Kebalikannya adalah opsional pada akhirnya, ia menerima boolean dan jika itu benar, itu akan membalikkan Array untuk Anda, cara yang sangat berguna untuk membalik ...


Juga di sini untuk melihat: docs.angularjs.org/api/ng/filter/orderBy
Alireza

0

Saya menulis bagian praktis ini untuk mengurutkan berdasarkan beberapa kolom / properti suatu objek. Dengan setiap klik kolom berurutan, kode menyimpan kolom terakhir yang diklik dan menambahkannya ke daftar nama string kolom yang diklik, menempatkannya dalam array yang disebut sortArray. Filter built-in Angular "orderBy" cukup membaca daftar sortArray dan memesan kolom dengan urutan nama kolom yang disimpan di sana. Jadi nama kolom yang terakhir diklik menjadi filter urutan utama, yang sebelumnya diklik berikutnya sebagai prioritas, dll. Urutan terbalik mempengaruhi semua urutan kolom sekaligus dan matikan naik / turun untuk daftar susunan array lengkap:

<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

Dibuat Pipa untuk disortir. Menerima string dan array string, mengurutkan berdasarkan beberapa nilai. Bekerja untuk Angular (bukan AngularJS). Mendukung penyortiran untuk string dan angka.

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

1
PS: Sebenarnya menurut saya belum ada yang menjawab pertanyaan aktual, karena itu untuk Angular, bukan AngularJS. Solusi saya bekerja mulai dari Angular 2. Diuji pada Angular 7.2.15
Andris

Anda harus mempertimbangkan a) kapan pertanyaan ini diajukan, dan b) kapan Angular 2 pertama kali diumumkan.
Nick

@andris Apakah Anda memiliki contoh kode ujung ke ujung yang dihosting di suatu tempat?
batu bergulir

Maaf, tapi tidak :(
Andris

-8

Pastikan penyortirannya tidak rumit bagi pengguna akhir. Saya selalu berpikir memilah grup dan sub grup agak rumit untuk dipahami. Jika ini adalah pengguna akhir teknis mungkin OK.


Ini bahkan bukan "komentar" yang relevan.
Pasti

Apakah salah bertanya pada diri sendiri apakah pendekatan saat ini adalah yang terbaik ketika Anda melakukan pengembangan GUI? Pengalaman pengguna akhir terasa relevan bagi saya
Jens Alenius

Ada banyak skenario di mana penyortiran berdasarkan beberapa properti memudahkan pengguna untuk memahami organisasi. Anda pada dasarnya mengelompokkan berbagai hal ke dalam kategori.
Owen Johnson
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.