Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Iterating objects or arrays inside ng-repeat

The JSON I'm passing into my view has objects and arrays inside of it. Example:

{ name: "test", projects: [ { name: "project1", tasks: "task1" } ] }

Using ng-repeat, I can say (key, value) in items and am given what you'd expect, each key and the stringified version of the object or array.

Is there a 'best practice' for iterating over the objects and arrays inside an ng-repeat?

like image 322
brock Avatar asked Sep 03 '13 17:09

brock


People also ask

How do I display an array in NG-repeat?

You can perform some operation on your data and can create another object with the modified structure so that it can be used with ng-repeat to display the table in the form you want. You can understand this better with an example.

What can I use instead of NG-repeat?

You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

What is the use of NG-repeat?

Definition and Usage 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.

Does ng-repeat create a new scope?

However, some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.


1 Answers

Just following up with an answer, as I was able to figure this out. It was simpler than I realized. Just used another ng-repeat for items that were arrays.

<div class="container" ng-repeat="item in items">
<table class="table table-striped table-bordered table-condensed">
    <tr>
        <th class="span3">name</th>
        <td>{{ item.name }}</td>
    </tr>
    <tr>
        <th class="span3">accounts</th>
        <td>
            <ul ng-repeat="account in item.accounts">
                <li>username: {{ account.username }}</li>
                <li>password: {{ account.password }}</li>
            </ul>
        </td>
    </tr>
</table>

like image 162
brock Avatar answered Sep 27 '22 19:09

brock