Сортировка выпадающего по алфавиту в AngularJS

158

Я заполняю раскрывающийся список с помощью ng-options, который подключен к контроллеру, который в свою очередь вызывает сервис. К сожалению, поступающие данные - беспорядок, и мне нужно иметь возможность сортировать их по алфавиту.

Вы полагаете, что что-то подобное $.sortByсделает это, но, к сожалению, это не сработало. Я знаю, что могу отсортировать его с помощью javascript с помощью вспомогательного метода function asc(a,b)или чего-то подобного, но я отказываюсь верить, что нет более чистого способа сделать это, плюс я не хочу раздувать контроллер вспомогательными методами. Это что-то настолько принципиальное в принципе, поэтому я не понимаю, почему AngularJS не имеет этого.

Есть ли способ сделать что-то вроде $orderBy('asc')?

Пример:

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

Было бы чрезвычайно полезно иметь опции, orderByчтобы вы могли делать все, что захотите, всякий раз, когда вы обычно пытаетесь отсортировать данные.

angularjs Дж Кастильо
источник

Ответы:

342

В Angular есть фильтр 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>
Gloopy
источник
1
Глядя на скрипку (или добавляя тег выбора сортировки в учебное пособие по Angular ToDo), можно получить возможность показывать как «выбранное» - или даже получить первый вариант показа - это проблема. С Angular это пусто?
Дэйв Эверитт
2
@DaveEveritt один из способов установить значение по умолчанию (и удалить пустой элемент) - предварительно выбрать связанный элемент selected. Для этого примера вы можете сделать что-то вроде $scope.selected = $scope.friends[0]. Смотрите эту скрипку для рабочего образца.
Глупый
Что делать, если я хочу возраст как значение в выделенном, а не весь элемент JSON?
Риши
@Rishi попробуйте это для ng-options: f.age as f.name for f in friends | orderBy:'name'- вот рабочая скрипка. Больше о нг-опциях здесь .
Мрачный
7
@Gloopy, этот ответ дал мне 90% пути туда. Не могли бы вы добавить случай, когда используется track by? <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 в обратном порядке. Вторым аргументом может быть любая функция порядка, поэтому вы можете сортировать по любому правилу.

@ смотри http://docs.angularjs.org/api/ng.filter:orderBy

вздор
источник
6
Или просто <select ng-option = "item.name для элемента в items | 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/

технократ
источник
2
Немного текста, объясняющего, как это отвечает на вопрос ОП и / или как вы будете его использовать, было бы очень полезно здесь.
Шон Боб
@ SeantheBean я уже дал демо скрипки, поэтому я не дал объяснения.
ТехноКрат
2
@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>
Триу Нгуен
источник