Nuru Salihu Nuru Salihu - 5 months ago 17
AngularJS Question

ng-repeat within ng-repeat in angular

I have a record that is returned from an angular $resource promise like below.



The record is an array and within each array of record there another variable array. I try displaying in my view like below.

div(ng-repeat="category in categories")
h6
img(src="{{category.ImageUrl}}")
|{{category.Name}}
ul(class="list-unstyled")
li(item in category.CategoryItems)
a(href="#") {{item.Item}} (0)


The problem is , category.CategoryItems returned undefined and empty as a result even though its actually an array of objects. Please how do i print those? Each category has category items of an array type. How do i best achieve this pls?

Answer

You didn't use ng-repeat the second time. Try this:

div(ng-repeat="category in categories")
            h6
                img(src="{{category.ImageUrl}}")
                |{{category.Name}}
            ul(class="list-unstyled")
                li(ng-repeat="item in category.CategoryItems")  //ng-repeat added
                    a(href="#") {{item.Item}} (0)