AngularJ'lerde sözlükler için ng-repeat nasıl kullanılır?

Ben kolayca json nesneleri veya diziler için ng-tekrar kullanabilirsiniz biliyorum :

<div ng-repeat="user in users"></div>

ancak ng yinelemesini sözlükler için nasıl kullanabiliriz, örneğin:

var users = null;
users["182982"] = "{...json-object...}";
users["198784"] = "{...json-object...}";
users["119827"] = "{...json-object...}";

Bunu kullanıcı sözlüğü ile kullanmak istiyorum:

<div ng-repeat="user in users"></div>

Mümkün mü?. Evetse, AngularJs'de nasıl yapabilirim?

Soruma bir örnek: C # 'da aşağıdaki gibi sözlükler tanımlarız:

Dictionary<key,value> dict = new Dictionary<key,value>();

//and then we can search for values, without knowing the keys
foreach(var val in dict.Values)
{
}

C # gibi bir sözlükten değerleri döndüren bir yapı işlevi var mı?

Kullanabilirsiniz

<li ng-repeat="(name, age) in items">{{name}}: {{age}}</li>

NgRepeat belgelerine bakın . Örnek: http://jsfiddle.net/WRtqV/1/

Ayrıca, AngularJS'ninng-repeat yeni bir işlevselliğinden , özel tekrar başlangıç ve bitiş noktalarından bahsetmek istiyorum . Bu işlevsellik, tek bir yerine bir dizi HTML öğesini tekrarlamak için eklendi ana HTML öğesi .

Tekrarlayıcı başlangıç ​​ve bitiş noktalarını kullanmak için ng-repeat-startve tuşlarını kullanarakng-repeat-end sırasıyla direktiflerini .

ng-repeat-startDirektifi çok benzer çalışır ng-repeatdirektifi. Aradaki fark, tüm HTML öğelerini (üzerinde tanımlandığı etiket dahil) ng-repeat-end, yerleştirildiği bitişteki HTML etiketine (etiketi dahil ) kadar tekrarlayacağıdır ng-repeat-end.

Örnek kod (bir denetleyiciden):

// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...

Örnek HTML şablonu:

<div ng-repeat-start="(id, user) in users">
    ==== User details ====
</div>
<div>
    <span>{{$index+1}}. </span>
    <strong>{{id}} </strong>
    <span class="name">{{user.name}} </span>
    <span class="age">({{user.age}})</span>
</div>

<div ng-if="!$first">
   <img src="/some_image.jpg" alt="some img" title="some img" />
</div>
<div ng-repeat-end>
    ======================
</div>

Çıktı aşağıdakine benzer (HTML stiline bağlı olarak):

==== User details ====
1.  119827 Stephan (18)
======================
==== User details ====
2.  182982 John (30)
[sample image goes here]
======================
==== User details ====
3.  198784 Antonio (32)
[sample image goes here]
======================

Gördüğünüz gibi, ng-repeat-starttüm HTML öğelerini (öğesi dahil ng-repeat-start) tekrar eder. Tüm ng-repeatözel özellikler (bu durumda $firstve $index) de beklendiği gibi çalışır.

JavaScript geliştiricileri, yukarıdaki veri yapısına Sözlük yerine nesne veya karma olarak başvurma eğilimindedir.

usersNesneyi null olarak başlatırken yukarıdaki sözdiziminiz yanlış . Kod okuması gerektiği gibi, bu bir yazım hatası olduğunu varsayalım:

// Initialize users as a new hash.
var users = {};
users["182982"] = "...";

Bir karma değerindeki tüm değerleri almak için for döngüsü kullanarak değerlerini yinelemeniz gerekir:

function getValues (hash) {
    var values = [];
    for (var key in hash) {

        // Ensure that the `key` is actually a member of the hash and not
        // a member of the `prototype`.
        // see: http://javascript.crockford.com/code.html#for%20statement
        if (hash.hasOwnProperty(key)) {
            values.push(key);
        }
    }
    return values;
};

JavaScript'te veri yapıları ile çok iş yapmayı planlıyorsanız, underscore.js kütüphanesi kesinlikle bir göz atmaya değer. Alt çizgi , yukarıdaki görevi sizin için yerine getirecek bir valuesyöntemle birlikte gelir :

var values = _.values(users);

Açısal kendim kullanmıyorum, ama bir hash değerlerini yinelemek için inşa edilmiş bir kolaylık yöntemi olacağından eminim (ah, işte başlıyoruz, Artem Andreev yukarıdaki cevabı veriyor :))

Açısal 7'de, aşağıdaki basit örnek işe yarar (sözlüğün şu şekilde adlandırılan bir değişkende olduğu varsayılarak) d ):

my.component.ts:

keys: string[] = [];  // declaration of class member 'keys'
// component code ...

this.keys = Object.keys(d);

my.component.html: (anahtar: değer çiftlerinin listesini görüntüler)

<ul *ngFor="let key of keys">
    {{key}}: {{d[key]}}
</ul>