Angularjs和Jade ng-repeat嵌套问题

cof*_*kid 1 angularjs angularjs-ng-repeat pug

我开始玩Jade,我遇到了这个奇怪的问题.我确定这是愚蠢的,但我已经尝试了一个小时没有成功.

我有一个包含组的对象,每个组包含项目.所以,有一个ng-repeat嵌套在另一个里面.

                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}}
Run Code Online (Sandbox Code Playgroud)

对象源是这样的:

[
{
    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" }
    ]
}
Run Code Online (Sandbox Code Playgroud)

]

因此,理论上每个组都有一些项目,并且应该可以进行嵌套.有趣的是:当Jade基于列表呈现HTML时,它只呈现每个组的第一个子节点.这是输出:

缺少元素

但是当我在列表前面添加另一个ng-repeat时,它可以正常工作.代码:

                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}}
Run Code Online (Sandbox Code Playgroud)

并输出:

没有丢失的物品

所以,请有人在他们体内喝更多咖啡或者更多翡翠技能给我一个帮助.我敢肯定它一定是显而易见的.

提前致谢.

cof*_*kid 6

我猜这是一个愚蠢的问题.ng-repeat应该在项目级别,而不是在列表级别.这是修复的代码.

                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}}
Run Code Online (Sandbox Code Playgroud)