AngularJS에서 알파벳순으로 드롭 다운 정렬


158

서비스를 호출하는 컨트롤러에 연결된 ng-options를 사용하여 드롭 다운을 채우고 있습니다. 불행히도 들어오는 데이터는 혼란스럽고 알파벳순으로 정렬해야합니다.

당신은 무언가 $.sortBy가 그것을 할 것이라고 생각하지만 불행히도 그것은 잭을하지 않았습니다. 도우미 메서드 function asc(a,b)또는 이와 유사한 방법으로 자바 스크립트를 통해 정렬 할 수 있다는 것을 알고 있지만이 작업을 수행하는 더 확실한 방법이 없다고 생각하지 않으며 도우미 메서드로 컨트롤러를 부풀리고 싶지 않습니다. 그것은 원칙적으로 매우 기본적인 것이므로 AngularJS에 왜 이것이 없는지 이해할 수 없습니다.

같은 일을하는 방법이 $orderBy('asc')있습니까?

예:

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

orderBy일반적으로 데이터 정렬을 시도 할 때마다 원하는 옵션 을 사용할 수 있도록 옵션을 사용하는 것이 매우 유용합니다 .

답변:


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>

1
바이올린을 보거나 Angular ToDo 튜토리얼에 정렬 선택 태그를 추가하거나 '선택됨'으로 표시하는 옵션을 가져 오거나 첫 번째 옵션을 표시하는 것도 문제입니다. Angular를 사용하면 비어 있습니까?
Dave Everitt

2
@DaveEveritt 기본값을 설정하고 빈 항목을 제거하는 한 가지 방법은에 대한 바인딩 된 항목을 미리 선택하는 것입니다 selected. 이 예제에서는 다음과 같은 작업을 수행 할 수 있습니다 $scope.selected = $scope.friends[0]. 작동하는 샘플 은 이 바이올린 을 참조하십시오 .
Gloopy

전체 JSON 요소가 아닌 선택된 값으로 연령을 원한다면 어떻게해야합니까?
Rishi

@Rishi는 ng-options에 이것을 시도 하십시오 : f.age as f.name for f in friends | orderBy:'name'- 작동하는 바이올린이 있습니다. ng-options에 대한 자세한 내용은 여기를 참조하십시오 .
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

orderByreverse플래그에 대한 세 번째 옵션을 수락 할 수 있습니다 .

<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 항목의 항목 | 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
이것이 OP의 질문에 어떻게 대답하고 어떻게 사용하는지 설명하는 약간의 텍스트가 여기에 매우 도움이 될 것입니다.
Sean the Bean

@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>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.