在AngularJS中的ng-repeat指令中动态显示模板?
我正在尝试根据当前项目动态显示ng-repeat指令中的多个模板之一。
我的JSON数据如下所示:
data: {
groups: [
{
name: "Group 1",
sections: [
{ name: "Section A" },
{ name: "Section B" }
]
},
{
name: "Group 2",
sections: [
{ name: "Section A" },
{ 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>