CODEWITHSUNDEEP
angularjspugangularjs-ng-repeat
coffekid
coffekid

Reputation: 605

Angularjs and Jade ng-repeat nested issue

I am beginning to play around with Jade and I am having this weird issue. I'm sure it's something stupid, but I've been trying for one hour without success.

I have an object that contains groups, each group contains items. So, there is one ng-repeat nested inside the other.

                ul.page-sidebar-menu(ng-repeat="group in menuItems")
                li(ng-class="group.groupStyle")
                    a(href="{{group.target}}")
                        i(ng-class="group.iconStyle")
                        span.title {{group.name}}
                        span(ng-class="group.spanStyle")
                    ul.sub-menu(ng-repeat="item in group.items")
                        li
                            a(href="{{item.target}}") {{item.name}}

The object source is like this:

[
{
    name: "Inicio",
    target: "/",
    groupStyle: {
        start: "start",
        active: "active"
    },
    spanStyle: {
        selected: "selected"
    },
    iconStyle: "icon-home"
},
{
    name: "Catalogo",
    target: "javascript:;",
    groupStyle: { },
    spanStyle: {
        arrow: "arrow"
    },
    iconStyle: "icon-book",
    items: [
        { name: "Clientes", target: "view1" },
        { name: "Rutas", target: "view1" },
        { name: "Transportistas", target: "view1" }
    ]
    },
{
    name: "Panel de Control",
    target: "javascript:;",
    groupStyle: { },
    spanStyle: {
        arrow: "arrow"
    },
    iconStyle: "icon-cogs",
    items: [
        { name: "Usuarios", target: "view2" },
        { name: "Configuracion", target: "view2" }
    ]
}

]

So, theoretically each group has some number of items and nesting should be possible. Here comes the funny part: when Jade renders the HTML based on a list it only renders the first child of every group. This is the output:

Missing elements

But when I added a table before the list with another ng-repeat it works fine. The code:

                ul.page-sidebar-menu(ng-repeat="group in menuItems")
                li(ng-class="group.groupStyle")
                    a(href="{{group.target}}")
                        i(ng-class="group.iconStyle")
                        span.title {{group.name}}
                        span(ng-class="group.spanStyle")
                        table
                            tr(ng-repeat="item in group.items")
                                td {{item.name}}
                    ul.sub-menu(ng-repeat="item in group.items")
                        li
                            a(href="{{item.target}}") {{item.name}}

And the output:

No missing items

So, please someone with more coffee in their body or more skills in Jade give me a hand. I'm sure it must be something obvious.

Thanks in advance.

Upvotes: 1

Views: 6325

Answers (1)

coffekid
coffekid

Reputation: 605

As I guessed it was a stupid issue. The ng-repeat should be at the items level, not at the list level. Here is the code fixed.

                ul.page-sidebar-menu
                li(ng-repeat="group in menuItems", ng-class="group.groupStyle")
                    a(href="{{group.target}}")
                        i(ng-class="group.iconStyle")
                        span.title {{group.name}}
                        span(ng-class="group.spanStyle")
                    ul.sub-menu
                        li(ng-repeat="item in group.items")
                            a(href="{{item.target}}") {{item.name}}

Upvotes: 6

Related Questions