Сортування випадаючого алфавіту в AngularJS

158

Я заповнюю спадне меню через використання ng-опцій, підключених до контролера, який, в свою чергу, викликає службу. На жаль, дані, які надходять, - безлад, і мені потрібно вміти сортувати їх за алфавітом.

Ви вважаєте, що щось подібне $.sortByзробить, але, на жаль, це не зробило джек Я знаю, що можу сортувати це через JavaScript за допомогою допоміжного методу function asc(a,b)чи чогось подібного, але я відмовляюся вірити, що немає більш чистого способу зробити це плюс, я не хочу роздувати контролер допоміжними методами. Це щось принципове в принципі, тому я не розумію, чому AngularJS цього не має.

Чи є спосіб зробити щось подібне $orderBy('asc')?

Приклад:

<select ng-option="items in item.$orderBy('asc')"></select>

Було б надзвичайно корисно мати варіанти, orderByщоб ви могли робити все, що завгодно, коли ви зазвичай намагаєтесь сортувати дані.

angularjs

— Дж. Кастільо
джерело

342

У кутовому є фільтр orderBy, який можна використовувати так:

<select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name'"></select>

Дивіться цей приклад для прикладу.

Варто відзначити, що якщо track byвін використовується, він повинен з’являтися після orderByфільтра, наприклад:

<select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></select>

— Похмурий
джерело

1

Дивлячись на скрипку (або додаючи тег вибору сортування до підручника Angular ToDo), отримання можливості показувати як "вибране" - або навіть отримувати перший варіант для показу - є проблемою. З кутовим це порожнє?

— Дейв Еверітт

2

@DaveEveritt Одним із способів встановити за замовчуванням (і видалити порожній елемент) є попередній вибір прив’язаного елемента selected. Для цього прикладу ви можете зробити щось на кшталт $scope.selected = $scope.friends[0]. Дивіться цю загадку для робочого зразка.

— Gloopy

Що робити, якщо я хочу, щоб у вибраному віці було значення, а не весь елемент JSON?

— Ріші

@ Rishi спробуйте це для ng-options: f.age as f.name for f in friends | orderBy:'name'- ось робоча загадка. Більше про ng-параметри тут .

— Gloopy

7

@Gloopy, ця відповідь отримала мені 90% шляху туди. Ви не хочете додати регістр, коли використовується трек за? <select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></selected>. Поклавши track byпісля замовлення фільтра не був інтуїтивним і ця відповідь є головним результатом пошуку від Google.

— MushinNoShin

26

Ви повинні мати можливість використовувати фільтр: orderBy

orderByможе прийняти третій варіант для reverseпрапора.

<select ng-option="item.name for item in items | orderBy:'name':true"></select>

Тут елемент сортується за властивістю 'name' у зворотному порядку. Другим аргументом може бути будь-яка функція порядку, тому можна сортувати в будь-якому правилі.

@see http://docs.angularjs.org/api/ng.filter:orderBy

— Тош
джерело

6

Або просто <select ng-option = "item.name для елемента в пунктах | orderBy: '- name'"> </select> Також працює :)

— Mahbub

2

var module = angular.module("example", []);

module.controller("orderByController", function ($scope) {
    $scope.orderByValue = function (value) {
        return value;
    };

    $scope.items = ["c", "b", "a"];
    $scope.objList = [
        {
            "name": "c"
        }, {
            "name": "b"
        }, {
            "name": "a"
        }];
        $scope.item = "b";
    });

http://jsfiddle.net/Nfv42/65/

— TechnoCrat
джерело

2

Трохи тексту, що пояснює, як це відповідає на питання ОП та / або як ви його використаєте, було б дуже корисно тут.

— Шон Бін

@SeantheBean я вже дав скрипкові демо, тому я не давав пояснень.

— TechnoCrat

2

@TechnoCrat Пояснення було б краще в будь-якому випадку. Насправді, було б особливо цікаво дізнатися, чому це рішення буде кращим перед рішеннями, розміщеними роками раніше. Або, як це взагалі відрізняється ...

— Chipowski

@Chipowski гаразд. рухаючись вперед, я спробую дати пояснення разом з відповіддю.

— TechnoCrat

0

Для всіх, хто хоче сортувати змінну в третьому шарі:

<select ng-option="friend.pet.name for friend in friends"></select>

ви можете зробити це так

<select ng-option="friend.pet.name for friend in friends | orderBy: 'pet.name'"></select>

— Тріу Нгуен
джерело