Сортировка выпадающего по алфавиту в 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>

— Триу Нгуен
источник