Как использовать ng-repeat для словарей в AngularJs?

280

Я знаю, что мы можем легко использовать ng-repeat для 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?

Пример для моего вопроса: В С# мы определяем словари типа:

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

Есть ли встроенная функция, которая возвращает значения из словаря, например, в С#?

Теги:
dictionary
angularjs-ng-repeat

4 ответа

549
Лучший ответ

Ты можешь использовать

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

Смотрите документацию ngRepeat. Пример: http://jsfiddle.net/WRtqV/1/

Поделиться
  • 52
    Это не то, что я спросил, а именно то, что я хотел. Спасибо Артем Андреев
  • 1
    Как мы можем использовать фильтр в этом нг-повтор. Это не работает в моем случае, когда я использую поисковый фильтр. Скажите <input type = "text" ng-model = "searchText" /> <li ng-repeat = "(имя, возраст) в элементах | filter: searchText"> {{name}}: {{age}} </ li> ...
Показать ещё 10 комментариев
27

Я также хотел бы упомянуть новую функциональность AngularJS ng-repeat, а именно специальный повтор start и конечные точки. Эта функциональность была добавлена, чтобы повторить серию HTML-элементов, а не только один родительский элемент 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) также работают как ожидалось.

Поделиться
  • 0
    Ошибка: [$ compile: uterdir] Не определен атрибут, найдено «ng-repeat-start», но не найдено ни одного подходящего «ng-repeat-end».
  • 0
    @zloctb вы должны пропустить <div ng-repeat-end>..</div> в своей разметке
6

Разработчики JavaScript склонны ссылаться на вышеуказанную структуру данных как на объект, так и на хэш вместо словаря.

Ваш синтаксис выше неверен, поскольку вы инициализируете объект users как null. Я предполагаю, что это опечатка, поскольку код должен читать:

// 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 определенно стоит посмотреть. Underscore поставляется с 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню