AngularJS'de açılır listeyi alfabetik olarak sıralama

158

Ben bir hizmet çağırıyor bir denetleyiciye bağlı ng-seçenekleri kullanımı ile bir açılan dolduruyorum. Ne yazık ki veri geliyor bir karışıklık ve ben bunu alfabetik olarak sıralamak gerekir.

Böyle bir şeyin $.sortBybunu yapacağını düşünüyorsunuz ama maalesef kriko yapmadı. Bir yardımcı yöntem function asc(a,b)veya böyle bir şey ile javascript yoluyla sıralayabilirsiniz biliyorum ama bunu yapmanın daha temiz bir yolu olmadığına inanmayı reddediyorum artı denetleyici yardımcı yöntemleri ile şişirmek istemiyorum. Prensipte çok temel bir şeydir, bu yüzden AngularJS'nin neden buna sahip olmadığını anlamıyorum.

Gibi bir şey yapmanın bir yolu var mı $orderBy('asc')?

Misal:

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

Genellikle orderByverileri sıralamaya çalıştığınızda istediğinizi yapabilmeniz için seçeneklere sahip olmak son derece yararlı olacaktır .

angularjs

— J Castillo
kaynak

342

Angular, şu şekilde kullanılabilen bir orderBy filtresine sahiptir:

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

Bir örnek için bu kemana bakın .

O takdirde dikkati çekiyor track bykullanılıyor o sonra görünmesi gerekir orderBybu gibi filtrenin:

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

— gloopy
kaynak

1

Kemana bakmak (ya da Açısal Yapılacaklar eğitimine bir sıralama seçme etiketi eklemek), 'seçili' olarak gösterme seçeneği elde etmek - hatta göstermek için ilk seçeneği almak - bir sorundur. Angular ile boş mu?

— Dave Everitt

2

@DaveEveritt bir varsayılan belirlemenin (ve boş öğeyi kaldırmanın) bir yolu için ilişkili bir öğeyi önceden seçmektir selected. Bu örnek için benzer bir şey yapabilirsiniz $scope.selected = $scope.friends[0]. Bkz bu keman bir çalışma örneği için.

— Gloopy

Ya yaşın tamamını JSON öğesinde değil, değer olarak seçersem ne olur?

— Rishi

@Rishi bunu ng-options için deneyin: f.age as f.name for f in friends | orderBy:'name'- İşte çalışan bir keman. Burada ng seçenekleri hakkında daha fazla bilgi .

— Gloopy

7

@Gloopy, Bu cevap beni yolun% 90'ına getirdi. Takip yöntemi kullanıldığında bir vaka eklemeyi düşünür müsünüz? <select ng-model="selected" ng-options="f.name for f in friends | orderBy:'name' track by f.id"></selected>. track bySipariş filtresinden sonra koymak sezgisel değildi ve bu cevap google'dan en iyi arama sonucudur.

— '14

26

Filtre kullanabilmeniz gerekir: orderBy

orderByreversebayrak için üçüncü bir seçeneği kabul edebilir .

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

Burada öğe ters sırada 'name' özelliğine göre sıralanmıştır. 2. bağımsız değişken herhangi bir sipariş işlevi olabilir, böylece herhangi bir kuralı sıralayabilirsiniz.

@ http://docs.angularjs.org/api/ng.filter:orderBy görün

— uydurma
kaynak

6

Ya da sadece <select ng-option = "öğelerdeki öğe için item.name | orderBy: '- name'"> </select> Çok çalışıyor :)

— 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/

— Teknokrat
kaynak

2

Bunun OP'nin sorusuna nasıl cevap verdiğini ve / veya nasıl kullanacağınızı açıklayan biraz metin burada çok yardımcı olacaktır.

— Sean the Bean

@SeantheBean zaten açıklama vermedim bu yüzden açıklama vermedim.

— TechnoCrat

2

@TechnoCrat Yine de bir açıklama tercih edilebilir. Aslında, bu çözümün yıllar önce yayınlanan çözümlere göre neden tercih edileceğini bilmek özellikle ilginç olacaktır. Ya da, nasıl farklıdır ...

— Chipowski

@Chipowski tamam. ileriye doğru cevap ile birlikte açıklama yapmaya çalışacağım.

— TechnoCrat

0

Değişkeni üçüncü katmanda sıralamak isteyen herkes için:

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

böyle yapabilirsin

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

— Trieu Nguyen
kaynak