How to use ng-repeat for dictionaries in AngularJs?
You can use
<li ng-repeat="(name, age) in items">{{name}}: {{age}}</li>
See ngRepeat documentation. Example: http://jsfiddle.net/WRtqV/1/
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.
JavaScript developers tend to refer to the above data-structure as either an object or hash instead of a Dictionary.
Your syntax above is wrong as you are initializing the users
object as null. I presume this is a typo, as the code should read:
// Initialize users as a new hash.var users = {};users["182982"] = "...";
To retrieve all the values from a hash, you need to iterate over it using a for loop:
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;};
If you plan on doing a lot of work with data-structures in JavaScript then the underscore.js library is definitely worth a look. Underscore comes with a values
method which will perform the above task for you:
var values = _.values(users);
I don't use Angular myself, but I'm pretty sure there will be a convenience method build in for iterating over a hash's values (ah, there we go, Artem Andreev provides the answer above :))