Як використовувати ng-повтор для словників у AngularJs?


285

Я знаю, що ми можемо легко використовувати ng-повтор для json-об'єктів або масивів, таких як:

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

але як ми можемо використовувати ng-повтор для словників, наприклад:

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 має більш жорсткі правила синтаксису, ніж об’єкт JavaScript . А оскільки ми вже в куточку Педанта, у JavaScript немає такого поняття, як «Словник». Ми просто називаємо їх об’єктами.
Пол Д. Уейт

Відповіді:


556

Можна використовувати

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

Дивіться документацію ngRepeat . Приклад: http://jsfiddle.net/WRtqV/1/


53
Це не те, що я запитував, а саме те, що я хотів. Дякую Артему Андрєєву
Вурал

1
Як ми можемо використовувати фільтр у цьому ng-повторі. У моєму випадку це не працює, коли я використовую фільтр пошуку. Скажіть <input type = "text" ng-model = "searchText" /> <li ng-repe = "(ім'я, вік) у елементах | filter: searchText"> {{name}}: {{age}} </ li> ...
Шехар

1
@Shekhar Filter "filter" працює лише з масивами. Ви можете спробувати створити запит на функції.
Артем Андрєєв

2
Приємно бачити деяку спільність з python :)
Роберт король

4
Ви можете отримати функцію фільтра навіть у словниках (об'єктах), використовуючи оператор ng-if .. як наприклад: <li ng-repe = "(id, obj) в елементах" ng-if = 'obj.sex = "female "'> {{obj.name}} {{obj.surname}} </li> ... де елементи - це набір осіб, індексований деяким ключем.
giowild

27

Я також хотів би зазначити нову функціональність AngularJSng-repeat , а саме - спеціальні точки початку та кінця повтору . Ця функціональність була додана для того, щоб повторити ряд елементів HTML, а не просто a один батьківського елемента HTML.

Щоб використовувати початкові та кінцеві точки ретранслятора, ви повинні визначити їх за допомогою ng-repeat-startтаng-repeat-end директив відповідно.

ng-repeat-startДиректива працює дуже схожа на ng-repeatдирективу. Різниця полягає в тому, що це буде повторювати всі елементи HTML (включаючи тег, який визначено), аж до кінцевого тегу 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) також працюють як очікувалося.


Помилка: [$ compile: uterdir] Невизначений атрибут, знайдено 'ng-repeat-start', але не знайдено збігу 'ng-repeat-end'.
zloctb

@zloctb ви, мабуть, пропустили <div ng-repeat-end>..</div>у своїй розмітці
Джон Кастер

6

Розробники JavaScript, як правило, називають вищезгадану структуру даних як об'єкт, або хеш замість словника.

Ваш синтаксис вище неправильний, оскільки ви ініціалізуєте usersоб'єкт як нуль. Я припускаю, що це помилка друку, оскільки код повинен читати:

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

Щоб отримати всі значення з хеша, вам слід перебрати його за допомогою циклу 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;
};

Якщо ви плануєте багато працювати з структурами даних в JavaScript, то бібліотека underscore.js , безумовно, варто переглянути. Підкреслення поставляється із valuesметодом, який виконує вищезазначене завдання для вас:

var values = _.values(users);

Сам я не використовую Angular, але я впевнений, що буде створений метод зручності для повторення значень хеша (ах, ми йдемо, Артем Андрєєв надає відповідь вище :))


1
+1 для underscore.js та ці корисні відомості. Дякую, Джонні!
Вурал

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>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.