Angularjs 和 Jade ng-repeat 嵌套问题答案

【问题标题】：Angularjs and Jade ng-repeat nested issueAngularjs 和 Jade ng-repeat 嵌套问题
【发布时间】：2013-10-18 16:08:53
【问题描述】：

我开始玩 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}}

对象来源是这样的：

[
{
    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" }
    ]
}

]

因此，理论上每个组都有一定数量的项目，并且应该可以嵌套。有趣的部分来了：当 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}}

还有输出：

所以，请那些拥有更多咖啡或更多翡翠技能的人帮助我。我敢肯定这一定很明显。

提前致谢。

【问题讨论】：

标签： angularjs pug angularjs-ng-repeat

【解决方案1】：

我猜这是一个愚蠢的问题。 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}}

【讨论】：