orderBy кілька полів у кутовому


382

Як сортувати, використовуючи кілька полів одночасно у кутовому? кулак по групі, а потім по підгрупі для Приклад

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

Я хотів показати це як

група: Підгрупа

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

Відповіді:


659

Будь ласка, дивіться це:

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

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

137
orderBy:['-group','sub']для сортування groupу зворотному порядку.
Дмитро

1
Чи має пріоритет групового поля перше місце в списку порядку?
luchosrock

5
@luchosrock, так, це, як очікувалося. Гра з наданим jsfiddle легко підтверджує пріоритет сортування зліва направо для наданих полів сортування.
Патрік Рефондіні

2
Зауважте, що необов'язковий параметр reverseOrder не підтримує масив, як це робить парам виразу, але ви можете опустити його і натомість надати порядок сортування для кожного елемента масиву, щоб вони перевернулися (або не були) окремо. Приклад: orderBy: ['group', '-sub'] буде сортувати за групами у звичайному порядку, а потім за підпунктом у зворотному порядку. Таким чином можна отримати кілька складних комбінацій.
Даніель Налбах

1
Ми моделювали пріоритет у нашому магазині, надаючи елементам масиву булеву властивість, використовуючи це як перший варіант. Приклад: orderBy: ['-featured', 'title'], який спричинив розміщення справжніх елементів вгорі (в алфавітному порядку), а потім інші елементи перераховані за алфавітом.
Даніель Налбах


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

Користувацький масив замість декількох orderBY


5

Сортування можна здійснити за допомогою фільтра 'orderBy' у кутовій.

Два способи: 1. З виду 2. З контролера

  1. З виду

Синтаксис:

{{array | orderBy : expression : reverse}} 

Наприклад:

 <div ng-repeat="user in users | orderBy : ['name', 'age'] : true">{{user.name}}</div>
  1. Від контролера

Синтаксис:

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

Наприклад:

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

5

Є два способи фільтрування AngularJs, один у HTML за допомогою {{}} і один у фактичних файлах JS ...

Ви можете вирішити свою проблему за допомогою:

{{ Expression | orderBy : expression : reverse}}

якщо ви використовуєте його в HTML або використовуєте щось на кшталт:

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

Зворотний бік є необов’язковим наприкінці, він приймає булеву форму, і якщо це правда, він оберне масив для вас, дуже зручний спосіб повернути масив ...


Також тут можна подивитися: docs.angularjs.org/api/ng/filter/orderBy
Аліреза

0

Я написав цю зручну частину для сортування за кількома стовпцями / властивостями об’єкта. З кожним наступним клацанням стовпця код зберігає останній натиснутий стовпець і додає його до зростаючого списку натиснених імен рядків стовпців, розміщуючи їх у масиві під назвою sortArray. Вбудований кутовий фільтр "orderBy" просто зчитує список sortArray і упорядковує стовпці за порядком імен стовпців, що зберігаються там. Таким чином, назва останнього клацання стовпця стає основним упорядкованим фільтром, попереднє натискає наступне в пріоритеті і т. Д. Зворотний порядок впливає на всі порядки стовпців одразу та змінює висхідний / низхідний для повного набору списку масивів:

<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

Створена труба для сортування. Приймає як рядок, так і масив рядків, сортуючи за кількома значеннями. Працює для Angular (не AngularJS). Підтримується як сортування для рядка, так і чисел.

@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: Насправді, на мою думку, наразі ніхто не відповів на фактичне запитання, тому що це було для Angular, а не для AngularJS. Моє рішення працює починаючи з кутового 2. Тестоване на кутовий 7.2.15
Андріс

Вам слід подумати про те, а) коли було задано це запитання, і б) коли вперше було оголошено Angular 2.
Нік

@andris У вас є робочий приклад коду до кінця, де розміщений десь?
рухомий камінь

Вибачте, але ні :(
Андріс

-8

Переконайтесь, що сортування не є складним для кінцевого споживача. Я завжди думав, що сортування за груповою та підгрупою зрозуміти трохи складніше. Якщо його кінцевий користувач є технічним, це може бути добре.


Це навіть не відповідний "коментар". Однозначно не відповідь на запитання
Afshin Moazami

Чи так неправильно запитати себе, чи є поточний підхід найкращим під час розробки графічного інтерфейсу? Кінцевий користувач вважає мене актуальним
Jens Alenius

Існує безліч сценаріїв, коли сортування за кількома властивостями полегшує користувачеві зрозуміти організацію. Ви по суті групуєте речі за категоріями.
Оуен Джонсон
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.