Bagaimana cara menggunakan ng-repeat untuk kamus di AngularJs?

Saya tahu bahwa kita dapat dengan mudah menggunakan ng-repeat untuk objek json atau array seperti:

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

tapi bagaimana kita bisa menggunakan ng-repeat untuk kamus, misalnya:

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

Saya ingin menggunakannya dengan kamus pengguna:

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

Apa itu mungkin?. Jika ya, bagaimana saya bisa melakukannya di AngularJs?

Contoh untuk pertanyaan saya: Di C # kami mendefinisikan kamus seperti:

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)
{
}

Apakah ada fungsi bawaan yang mengembalikan nilai dari kamus seperti di c #?

Kamu bisa memakai

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

Lihat dokumentasi ngRepeat . Contoh: http://jsfiddle.net/WRtqV/1/

Saya juga ingin menyebutkan fungsionalitas baru AngularJSng-repeat , yaitu, titik awal dan akhir pengulangan khusus . Fungsionalitas itu ditambahkan untuk mengulang serangkaian elemen HTML, bukan hanya satu elemen HTML induk .

Untuk menggunakan titik awal dan akhir pengulang Anda harus mendefinisikannya dengan menggunakan ng-repeat-startdanng-repeat-end masing-masing arahan.

The ng-repeat-startdirektif bekerja sangat mirip dengan ng-repeatdirektif. Perbedaannya adalah bahwa ini akan mengulangi semua elemen HTML (termasuk tag yang telah ditetapkannya) hingga tag HTML yang berakhir di mana ng-repeat-endditempatkan (termasuk tag dengan ng-repeat-end).

Kode sampel (dari pengontrol):

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

Contoh template HTML:

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

Output akan terlihat mirip dengan yang berikut ini (tergantung pada gaya HTML):

==== 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]
======================

Seperti yang Anda lihat, ng-repeat-startulangi semua elemen HTML (termasuk elemen dengan ng-repeat-start). Semua ng-repeatproperti khusus (dalam hal ini $firstdan $index) juga berfungsi seperti yang diharapkan.

Pengembang JavaScript cenderung merujuk pada struktur data di atas sebagai objek atau hash alih-alih Kamus.

Sintaks Anda di atas salah saat Anda menginisialisasi usersobjek sebagai nol. Saya kira ini salah ketik, karena kode harus dibaca:

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

Untuk mengambil semua nilai dari hash, Anda harus mengulanginya menggunakan for for:

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;
};

Jika Anda berencana untuk melakukan banyak pekerjaan dengan struktur data dalam JavaScript maka perpustakaan underscore.js pasti layak untuk dilihat. Garis bawah dilengkapi dengan valuesmetode yang akan melakukan tugas di atas untuk Anda:

var values = _.values(users);

Saya tidak menggunakan Angular sendiri, tapi saya cukup yakin akan ada metode kenyamanan yang dibangun untuk mengulangi nilai hash (ah, ini dia, Artem Andreev memberikan jawaban di atas :))

Dalam Angular 7, contoh sederhana berikut ini akan berfungsi (dengan asumsi kamus dalam variabel yang disebut d ):

my.component.ts:

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

this.keys = Object.keys(d);

my.component.html: (akan menampilkan daftar kunci: pasangan nilai)

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