How to Use Nested Templates with ng-repeat in AngularJS?

Introduction

In AngularJS, working with nested data structures can sometimes be challenging, especially when dealing with templates and the ng-repeat directive. If you've encountered an issue while trying to iterate through an inner array and display it as a separate list, you’re not alone. This article will guide you on how to modify your existing code to achieve the desired output by utilizing nested templates effectively.

Understanding the Problem

In your initial implementation, it seems you’re trying to display an object’s name along with iterating through its associated focus items. However, the aim to show each focus item in a distinct list item while keeping the object's name above can be tricky. The issue often arises when misconfiguring the directives or the way you structure your templates.

Sample Data Structure

First, let’s take a look at the data structure you are working with:

[{
    "obj": {
        "name": "someName"
    },
    "focus": [
        {"id": "something here"},
        {"id": "Another etc"}
    ]
}]

This structure illustrates that every object within your array contains a name and an array of focus objects. Your goal is to render this appropriately in the UI.

Step-by-Step Solution

To accomplish your goal, follow these steps to properly set up your templates and controllers.

1. Update Your First Template

Let’s modify your main template where you display the object’s name and iterate over the focus items:

Main Template