Dynamically displaying template in ng-repeat directive in AngularJS?

Question

I am attempting to dynamically display one of several templates within an ng-repeat directive, based on the current item.

My JSON data looks like this:

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

My goal is to render the tree of data dynamically, with each group containing multiple sections. The groups will all have the same template, but each section should have its own template, based on the name field.

Assuming the top level HTML is:

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

Ideally, each section would also need to have its own scoped data and controller associated with it. I've had good luck building this type of system with Knockout but am trying to understand the Angular way of doing things.

Answer 1

You could do something like this:

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

Then in your 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';
    }
}

Then your sectiona.html could look like this (to have a controller specific to that file):

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