How to use ng-repeat for dictionaries in AngularJs?

286

I know that we can easily use ng-repeat for json objects or arrays like:

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

but how can we use the ng-repeat for dictionaries, for example:

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

I want to use that with users dictionary:

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

Is it possible?. If yes, how can I do it in AngularJs?

Example for my question: In C# we define dictionaries like:

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

Is there a build-in function that returns the values from a dictionary like in c#?

This question is tagged with angularjs json dictionary angularjs-ng-repeat

~ Asked on 2012-08-16 11:08:01

The Best Answer is


558

You can use

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

See ngRepeat documentation. Example: http://jsfiddle.net/WRtqV/1/

~ Answered on 2012-08-16 11:37:35


27

I would also like to mention a new functionality of AngularJS ng-repeat, namely, special repeat start and end points. That functionality was added in order to repeat a series of HTML elements instead of just a single parent HTML element.

In order to use repeater start and end points you have to define them by using ng-repeat-start and ng-repeat-end directives respectively.

The ng-repeat-start directive works very similar to ng-repeat directive. The difference is that is will repeat all the HTML elements (including the tag it's defined on) up to the ending HTML tag where ng-repeat-end is placed (including the tag with ng-repeat-end).

Sample code (from a controller):

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

Sample HTML template:

<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 would look similar to the following (depending on HTML styling):

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

As you can see, ng-repeat-start repeats all HTML elements (including the element with ng-repeat-start). All ng-repeat special properties (in this case $first and $index) also work as expected.

~ Answered on 2013-12-17 16:59:52


Most Viewed Questions: