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

Question

我试图根据当前项目在 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>

理想情况下，每个部分还需要有自己的范围数据和与之关联的 Controller 。我很幸运用 Knockout 构建了这种类型的系统，但我正在尝试了解 Angular 的做事方式。

Answer 1

你可以这样做:

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

然后在您的 Controller 中:

$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 可能看起来像这样(有一个特定于该文件的 Controller ):

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