Bagaimana cara menggunakan ng-repeat untuk kamus di AngularJs?


285

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


1
Apa perbedaan antara kamus dan objek JSON? Saya percaya tidak ada javascript!
markmarijnissen

8
@markmarijnissen: Objek JSON memiliki aturan sintaksis yang lebih ketat daripada objek JavaScript . Dan, karena kita sudah berada di Pedant's Corner, tidak ada yang namanya "Kamus" di JavaScript. Kami hanya memanggil mereka objek.
Paul D. Waite

Jawaban:


556

Kamu bisa memakai

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

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


53
Ini bukan apa yang saya minta tetapi apa yang saya inginkan. Terima kasih Artem Andreev
Vural

1
Bagaimana kita bisa menggunakan filter dalam ng-repeat ini. Ini tidak berfungsi dalam kasus saya ketika saya menggunakan filter pencarian. Ucapkan <input type = "text" ng-model = "searchText" /> <li-repeat = "(nama, umur) pada item | filter: searchText"> {{name}}: {{age}} </ li> ...
Shekhar

1
@Shekhar Filter "filter" hanya berfungsi dengan array. Anda dapat mencoba membuat permintaan fitur.
Artem Andreev

2
Bagus untuk melihat beberapa kesamaan dengan python :)
robert king

4
Anda bisa mendapatkan fitur filter bahkan pada kamus (objek) dengan menggunakan pernyataan ng-if .. seperti misalnya: <li ng-repeat = "(id, obj) pada item" ng-if = 'obj.sex = "perempuan "'> {{obj.name}} {{obj.surname}} </li> ... di mana item adalah sekumpulan orang yang diindeks oleh beberapa kunci.
giowild

27

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.


Kesalahan: [$ compile: uterdir] Atribut Unterminated, ditemukan 'ng-repeat-start' tetapi tidak ada yang cocok dengan 'ng-repeat-end' ditemukan.
zloctb

@ zloctb Anda harus melewatkan <div ng-repeat-end>..</div>di markup Anda
John Kaster

6

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


1
+1 untuk underscore.js dan informasi bermanfaat ini. Johnny terima kasih!
Vural

0

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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.