在AngularJS中动态显示ng-repeat指令中的模板？

发布时间：2020-12-17 09:29:23 所属栏目：安全来源：网络整理

导读：我正在尝试根据当前项目在ng-repeat指令中动态显示几个模板之一. 我的JSON数据如下所示： data: { groups: [ { name: "Group 1",sections: [ { name: "Section A" },{ name: "Section B" } ] },{ name: "Group 2",{ name: "Section B" } ] } ]} 我的目标是动

我正在尝试根据当前项目在ng-repeat指令中动态显示几个模板之一.

我的JSON数据如下所示：

data: {
    groups: [
        {
            name: "Group 1",sections: [
                { name: "Section A" },{ name: "Section B" }
            ]
        },{
            name: "Group 2",{ name: "Section B" }
            ]
        }
    ]
}

我的目标是动态渲染数据树,每个组包含多个部分.这些组都将具有相同的模板,但每个部分都应该有自己的模板,基于名称字段.

假设顶级HTML是：

<div ng-repeat="group in groups">
    {{ group.name }}
    <div ng-repeat="section in sections">
        <!-- Dynamic section template used -->
    </div>
</div>

理想情况下,每个部分还需要具有与其相关联的其自己的作用域数据和控制器.我已经用Knockout建立了这种类型的系统,但是我正在努力去理解Angular的做事方式.

你可以这样做：

<div ng-repeat="group in groups">
    {{ group.name }}
    <div ng-repeat="section in sections" ng-include="getIncludeFile(section)">
        <!-- Dynamic section template used -->
    </div>
</div>

然后在你的控制器：

$scope.getIncludeFile = function(section) {
    // Make this more dynamic,but you get the idea
    switch (section) {
        case "Section A":
            return 'partials/sectiona.html';
        case "Section B":
            return 'partials/sectionb.html';
    }
}

那么你的sectiona.html可能看起来像这样(有一个特定于该文件的控制器)：

<div ng-controller="SectionAController">
    <!-- HTML in here,and can bind straight to your SectionAController -->
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!