Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to iterate over the keys and values with ng-repeat in AngularJS?

In my controller, I have data like: $scope.object = data

Now this data is the dictionary with keys and values from json.

I can access the attribute with object.name in the template. Is there any way that I can iterate over the keys as well and display them in table like

<tr><td> {{key}} </td> <td> data.key </td>

The data is like this

{     "id": 2,     "project": "wewe2012",     "date": "2013-02-26",     "description": "ewew",     "eet_no": "ewew", } 
like image 214
user192362127 Avatar asked Feb 28 '13 04:02

user192362127


People also ask

What is the use of NG-repeat in AngularJS?

AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.

How do I get an index value in ng-repeat?

Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.

How do I use track in NG-repeat?

To avoid this problem, you can use "track by" with ng-repeat. In track by you have to use angular expression that will be used to uniquely identify the each items in collection or model. "track by" tells the angular js that how angular js will track the association between DOM and the model (i.e. collection).

What is the difference between ng-repeat and NgFor?

Ng-repeat is like a for loop or any other kind of loop , it is used to iterate over the given object or array in frontend. For more info on ng-repeat visit this link AngularJS . The NgFor directive instantiates a template once per item from an iterable.


1 Answers

How about:

<table>   <tr ng-repeat="(key, value) in data">     <td> {{key}} </td> <td> {{ value }} </td>   </tr> </table> 

This method is listed in the docs: https://docs.angularjs.org/api/ng/directive/ngRepeat

like image 86
Josh David Miller Avatar answered Sep 27 '22 21:09

Josh David Miller