จะใช้ ng-repeat สำหรับพจนานุกรมใน AngularJs ได้อย่างไร?


285

ฉันรู้ว่าเราสามารถใช้ซ้ำ ngสำหรับวัตถุหรืออาร์เรย์ json เช่น:

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

แต่เราจะใช้ ng-repeat สำหรับพจนานุกรมได้อย่างไร:

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

ฉันต้องการใช้กับพจนานุกรมผู้ใช้:

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

เป็นไปได้ไหม?. ถ้าใช่ฉันจะทำใน AngularJs ได้อย่างไร

ตัวอย่างสำหรับคำถามของฉัน: ใน C # เรากำหนดพจนานุกรมเช่น:

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 # หรือไม่?


1
ความแตกต่างระหว่างพจนานุกรมและวัตถุ JSON คืออะไร? ฉันเชื่อว่าไม่มีใน javascript!
markmarijnissen

8
@markmarijnissen: JSON วัตถุมีกฎไวยากรณ์ที่เข้มงวดมากขึ้นกว่าวัตถุ และเนื่องจากเราอยู่ในมุมของ Pedant แล้วจึงไม่มีสิ่งใดเป็น "พจนานุกรม" ใน JavaScript เราแค่เรียกมันว่าวัตถุ
Paul D. Waite

คำตอบ:


556

คุณสามารถใช้ได้

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

โปรดดูเอกสาร ngRepeat ตัวอย่าง: http://jsfiddle.net/WRtqV/1/


53
นี่ไม่ใช่สิ่งที่ฉันถาม แต่ exacly สิ่งที่ฉันต้องการ ขอบคุณ Artem Andreev
Vural

1
เราจะใช้ตัวกรองใน ng-repeat นี้ได้อย่างไร มันไม่ทำงานในกรณีของฉันเมื่อฉันใช้ตัวกรองการค้นหา พูดว่า <input type = "text" ng-model = "searchText" /> <li ng-repeat = "(ชื่ออายุ) ในรายการ | ตัวกรอง: searchText"> {{name}}: {{อายุ}} </ li> ...
Shekhar

1
@Shekhar Filter "ตัวกรอง" ใช้งานได้กับอาร์เรย์เท่านั้น คุณสามารถลองสร้างคำขอคุณลักษณะได้
Artem Andreev

2
ดีที่จะเห็นคนธรรมดาสามัญบางอย่างกับงูหลาม :)
โรเบิร์ตกษัตริย์

4
คุณสามารถรับคุณสมบัติตัวกรองแม้ในพจนานุกรม (วัตถุ) โดยใช้คำสั่ง ng-if .. เช่นเช่น: <li ng-repeat = "(id, obj) ในรายการ" ng-if = 'obj.sex = "female "'> {{obj.name}} {{obj.surname}} </li> ... โดยที่รายการคือชุดของบุคคลที่จัดทำดัชนีโดยคีย์บางรายการ
giowild

27

ฉันอยากจะพูดถึงฟังก์ชั่นใหม่ของAngularJSng-repeatคือการทำซ้ำจุดเริ่มต้นและจุดสิ้นสุดพิเศษ มีการเพิ่มฟังก์ชันการทำงานนั้นเพื่อทำซ้ำชุดองค์ประกอบ HTML แทนองค์ประกอบHTML หลักเดียว

ในการใช้จุดเริ่มต้นและจุดสิ้นสุดของทวนคุณต้องกำหนดโดยใช้ng-repeat-startและng-repeat-endคำสั่งตามลำดับ

ng-repeat-startสั่งการทำงานคล้ายกับng-repeatคำสั่ง ความแตกต่างคือจะทำซ้ำองค์ประกอบ HTML ทั้งหมด (รวมถึงแท็กที่กำหนดไว้) จนถึงแท็กสิ้นสุดที่ng-repeat-endมีตำแหน่ง (รวมถึงแท็กด้วยng-repeat-end)

โค้ดตัวอย่าง (จากคอนโทรลเลอร์):

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

ตัวอย่างเทมเพลต 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>

ผลลัพธ์จะคล้ายกับตัวอย่างต่อไปนี้ (ขึ้นอยู่กับสไตล์ของ 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]
======================

อย่างที่คุณเห็นให้ng-repeat-startทำซ้ำองค์ประกอบ HTML ทั้งหมด (รวมถึงองค์ประกอบด้วยng-repeat-start) ng-repeatคุณสมบัติพิเศษทั้งหมด(ในกรณีนี้$firstและ$index) ยังทำงานได้ตามที่คาดไว้


ข้อผิดพลาด: [$ คอมไพล์: uterdir] แอตทริบิวต์ที่ไม่ได้ระบุไว้พบ 'ng-repeat-start' แต่ไม่พบ 'ng-repeat-end' ที่ตรงกัน
zloctb

@zloctb คุณต้องข้าม<div ng-repeat-end>..</div>มาร์กอัปของคุณ
John Kaster

6

นักพัฒนาจาวาสคริปต์มักอ้างถึงโครงสร้างข้อมูลข้างต้นว่าเป็นวัตถุหรือแฮชแทนที่จะเป็นพจนานุกรม

ไวยากรณ์ของคุณด้านบนผิดเนื่องจากคุณกำลังเริ่มต้นusersวัตถุเป็นโมฆะ ฉันคิดว่านี่เป็นตัวพิมพ์ผิดเนื่องจากรหัสควรอ่าน:

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

ในการดึงค่าทั้งหมดจากแฮชคุณจะต้องวนซ้ำโดยใช้สำหรับลูป:

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 ไลบรารีunderscore.jsนั้นควรค่าแก่การดูแน่นอน ขีดล่างมาพร้อมกับvaluesเมธอดที่จะทำงานดังกล่าวให้กับคุณ:

var values = _.values(users);

ฉันไม่ได้ใช้ Angular ด้วยตัวเอง แต่ฉันค่อนข้างแน่ใจว่าจะมีวิธีอำนวยความสะดวกในการทำซ้ำค่าแฮช (อาเราไปแล้ว Artem Andreev ให้คำตอบข้างบน :))


1
+1 สำหรับ underscore.js และข้อมูลที่เป็นประโยชน์เหล่านี้ ขอบคุณจอห์นนี่!
Vural

0

ใน Angular 7 ตัวอย่างง่าย ๆ ต่อไปนี้ใช้ได้ (สมมติว่าพจนานุกรมอยู่ในตัวแปรที่เรียกว่าd):

my.component.ts:

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

this.keys = Object.keys(d);

my.component.html: (จะแสดงรายการของคีย์: คู่ของค่า)

<ul *ngFor="let key of keys">
    {{key}}: {{d[key]}}
</ul>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.