2013-02-19 18 views
47

varsayalım Ben Aşağıdaki kullanıcılar:AngularJS'de nesne veri kaynağını ng-yineleme nasıl sıralanır?

$scope.users = { 
    "2": { 
    email: '[email protected]', 
    name: 'John' 
    }, 
    "3": { 
    email: '[email protected]', 
    name: 'Elisa' 
    } 
} 

Ben aşağıdaki seçenekleri içeren bir <select> oluşturmak istiyorum:

<option value="3">Elisa</option> 
<option value="2">John</option> 

Başka bir deyişle, kullanıcılar adına göre sıralanmış olmalıdır.

Ben (key, value) in expression sözdizimi kullanarak yapmak istedim, ama çalışmıyor:

<option ng-repeat="(user_id, user) in users | orderBy:'user.name'" 
     value="{{ user.id }}"> 
    {{ user.name }} 
</option> 

Live example here.

ben eksik?

ng-options ile uyumlu olmayan ui-select2 numaralı telefonu kullanırken ng-options ile ilgili çözümler önermeyin.

+0

olarak verileri dönüştürmek gerekir. Lütfen uygun bir wiki ekleyerek ve diğer alakalı sorulara ekleyerek etiketlere bir iyilik yapın. Eğer etiketler için başka soru bulamazsanız, o zaman onlar iki kez var olmak zorunda değilsiniz ... – Charles

+2

'ng-repeat' ve' orderBy', AngularJS'de çok yaygındır. Bu ikisiyle ilgili daha fazla soru olacağına inanıyorum.Ama yine de, bu etiketleri başka sorulara da ekledim. –

+0

Biçimsel olarak alternatif yazımlar önerme önerisine sahip olmadığım için, burada başka biri ** angularjs-order-by ** yazmalıdır. 'OrderBy' 'orderby' olurken, deve kaplı 'ngRepeat' 'ng-repeat' 'olacaktı. – maurice

cevap

52

Bir bağlantı yazarın cevabı referanslar, bunun bahsedilen geçici çözümlerden birini koymak iyi olacağını düşündüm dizisindeki bu görecekti iken SO:

Bunun teknik olarak uygulanmadığı doğrudur, ancak veri modelinizi biraz değiştirmek isteyip istemediğiniz konusunda kolay bir iş vardır: Nesnenin özelliklerinin bir dizisini oluşturmak için özel bir filtre kullanın ( yedek olmadan . Eğer nesnelere (yukarıdaki örnekte "id") tuşuna alanını eklerseniz, davranışı elde etmek mümkün olmalıdır aradığın: Burada

app.filter("toArray", function(){ 
    return function(obj) { 
     var result = []; 
     angular.forEach(obj, function(val, key) { 
      result.push(val); 
     }); 
     return result; 
    }; 
}); 
... 

$scope.users = { 
    1: {name: "John", email: "[email protected]", id: 1}, 
    2: {name: "Elisa", email: "[email protected]", id: 2} 
}; 

kullanılabilecek ng-repeat direktif bu:

<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option> 

Ve işte plunkr.

orderBy filtresinin, user.name parametresi olarak name parametresine dikkat edin.

Maalesef, nesnelerinize id özelliğini ekleyerek, içerdiği nesnede anahtarı ile uyumsuzluk potansiyeli yaratır.

Yanıtınızda bahsettiğiniz bağlantıda, aynı zamanda kullanıcı nesnelerinde id özelliğini yaratan çözümler önerilmiştir, ancak bu yaklaşımın biraz daha az dağınık olduğunu hissediyorum (veri çoğaltmanın getirilmesi pahasına)). Kabul cevap ekleme ve veri biçimini gördükten

+0

@BarthZalewski Bu iyi görünüyor ancak filtreyi ters çevirmeye çalışırsam hiçbir şey değişmez mi? bir durum olarak tersini halledebilir misin? ng-repeat = "kullanıcı kullanıcıları | toArray | orderBy: 'name': reverse" – ak85

+0

Bu, kullanıcıların yaklaşımındaki (anahtar, değer) kullanımında da çalışır. Aferin! –

+1

@ ak85'in sorusuna yanıt olarak, ng-repeat = "user in users | toArray | orderBy: 'name': true" seçeneğini kullanarak listeyi tersine çevirebilirsiniz. Boolean true, tersi bir sıra tanımlar. – Doug

9

Tamam, cevap buldu:

It is not implemented yet :(

+9

Ayrıca, alıntı yaptığınız konuya göre uygulamak için bir planın bulunmadığını da belirtmek gerekir. – mhess

0

, sen İki yeni bu soru için etiketleri ve bu soruyu sadece gerekmez

app.filter('myFilterUsers',function(){ 
    return function(data) 
    { 
     var newRes = []; 
     angular.forEach(data,function(val,key){ 
      val["id"] = key; //Add the ID in the JSON object as you need this as well. 
      newRes.push(val); 
     }); 
     return newRes; 
    } 
}); 
İlgili konular