current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

JSFiddle

I'm not able to access the array images in the nested collection. Why am I not able to see any output?

The model:

var obj = [{
    "id": "7",
    "date": "1 Jan",
    "images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"]
}, {
    "id": "7",
    "date": "1 Jan",
    "images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"]
}];

This is the HTMl with ng-repeat:

<ul>
    <li ng-repeat="img in item"> 
        <br /> 
        <li ng-repeat="img1 in img.images">{{img1}}</li>
    </li>
</ul>

Can anyone point me to what I'm missing?

share|improve this question

1 Answer 1

up vote 3 down vote accepted

The problem is you are trying to repeat a list of li elements inside of a li element, which is invalid HTML. As such, angular will not render this.

Update your HTML to:

<ul>
    <li ng-repeat="img in item"> 
        <ul>
            <li ng-repeat="img1 in img.images">{{img1}}</li>
        </ul>
    </li>
</ul>
share|improve this answer
    
Of course if u didn't want nested uls you are screwed –  Sam Aug 1 '14 at 5:34
    
You'll need to find another approach if you want to render a flat list, that's true. Either by changing your HTML structure or by flattening the input array –  Anzeo Aug 1 '14 at 6:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.