我正在尝试根据当前项目在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的做事方式.
你可以这样做：
原文链接：https://www.f2er.com/angularjs/140558.html<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>
