Làm thế nào để sử dụng ng-repeat cho từ điển trong AngularJs?

Tôi biết rằng chúng ta có thể dễ dàng sử dụng ng-repeat cho các đối tượng json hoặc mảng như:

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

nhưng làm thế nào chúng ta có thể sử dụng ng-repeat cho từ điển, ví dụ:

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

Tôi muốn sử dụng nó với từ điển người dùng:

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

Có thể không? Nếu có, làm thế nào tôi có thể làm điều đó trong AngularJs?

Ví dụ cho câu hỏi của tôi: Trong C #, chúng tôi định nghĩa từ điển như:

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ó một hàm dựng sẵn trả về các giá trị từ một từ điển như trong c # không?

Bạn có thể dùng

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

Xem tài liệu ngRepeat . Ví dụ: http://jsfiddle.net/WRtqV/1/

Tôi cũng muốn đề cập đến một chức năng mới của AngularJSng-repeat , cụ thể là, điểm bắt đầu và điểm kết thúc đặc biệt . Chức năng đó đã được bổ sung để lặp lại một loạt các yếu tố HTML thay vì chỉ là một đơn phần tử HTML mẹ.

Để sử dụng điểm bắt đầu và điểm kết thúc lặp lại, bạn phải xác định chúng bằng cách sử dụng ng-repeat-startvà ng-repeat-endchỉ thị tương ứng.

Lệnh ng-repeat-startnày hoạt động rất giống với ng-repeatchỉ thị. Sự khác biệt là sẽ lặp lại tất cả các yếu tố HTML (bao gồm cả thẻ được xác định trên) cho đến thẻ HTML kết thúc ng-repeat-endđược đặt (bao gồm cả thẻ với ng-repeat-end).

Mã mẫu (từ bộ điều khiển):

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

Mẫu HTML mẫu:

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

Đầu ra sẽ trông giống như sau (tùy thuộc vào kiểu 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]
======================

Như bạn có thể thấy, ng-repeat-startlặp lại tất cả các phần tử HTML (bao gồm cả phần tử với ng-repeat-start). Tất cả ng-repeatcác thuộc tính đặc biệt (trong trường hợp này $firstvà $index) cũng hoạt động như mong đợi.

Các nhà phát triển JavaScript có xu hướng đề cập đến cấu trúc dữ liệu ở trên dưới dạng đối tượng hoặc hàm băm thay vì Từ điển.

Cú pháp của bạn ở trên là sai khi bạn đang khởi tạo usersđối tượng là null. Tôi đoán đây là một lỗi đánh máy, vì mã nên đọc:

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

Để lấy tất cả các giá trị từ hàm băm, bạn cần lặp lại nó bằng vòng lặp 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;
};

Nếu bạn có kế hoạch thực hiện nhiều công việc với các cấu trúc dữ liệu trong JavaScript thì thư viện underscore.js chắc chắn đáng xem. Gạch dưới đi kèm với một valuesphương thức sẽ thực hiện nhiệm vụ trên cho bạn:

var values = _.values(users);

Bản thân tôi không sử dụng Angular, nhưng tôi khá chắc chắn rằng sẽ có một phương pháp tiện lợi được xây dựng để lặp lại các giá trị của hàm băm (à, chúng ta đi thôi, Artem Andreev cung cấp câu trả lời ở trên :))

Trong Angular 7, ví dụ đơn giản sau sẽ hoạt động (giả sử từ điển nằm trong một biến được gọi là d):

my.component.ts:

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

this.keys = Object.keys(d);

my.component.html: (sẽ hiển thị danh sách các cặp khóa: giá trị)

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