CODEWITHSUNDEEP
angularjsnestedangularjs-ng-repeat
Alex
Alex

Reputation: 1250

nested ng-repeat is not working

I want to do nested ng-repeat with the following json: 

[
      {
        "id": 18,
        "title": "awesome title",
        "description": "incredible description meow",
        "hour": "2000-01-01T11:12:00.000Z",
        "duration": 12,
        "date": "2015-11-25",
        "user_id": 1,
        "latitude": 14.8744239,
        "longitude": 4.1433319,
        "formatted_addres": "castellgal",
        "tags": [
          {
            "id": 29,
            "name": "megatag",
            "created_at": "2015-11-26T11:57:03.421Z",
            "updated_at": "2015-11-26T11:57:03.421Z"
          },
          {
            "id": 30,
            "name": "another-tag",
            "created_at": "2015-11-26T11:57:03.426Z",
            "updated_at": "2015-11-26T11:57:03.426Z"
          }
        ],
        "username": "Shanna Friesen",
        "url": "http://localhost:3000/events/18.json"
      }
    ]

This is my html code:

<section ng-repeat="event in events | orderBy:'date'">
    <div class="panel panel-default single-event">
        <div class="panel-heading">
            <h3>
                {{event.title}}
                <em class="pull-right">Created by user: {{event.username}}</em>
            </h3>
        </div>
        <div class="panel-body">
            Description:<br>{{event.description}} <br>
            <em class="pull-right">{{event.date | date:'dd-MM-yyyy' }} - {{event.hour | date:"H:mm"}}</em> <br>
            {{event.duration}} minutes <br>
    <tr>
        <td ng-repeat="tag in event.tags">{{ tag.name }}</td>
    </tr>
        </div>
    </div>
</section>

The event is listed perfectly, but the {{tag.name}} does not appear. If I try {{event.tags}} I see the object tags with all the content, and if I try {{event.tags[0].name}} I see the name of the first tag (Both without ng-repeat). But {{ tag.name }} is not showing anything.

Thanks.

Upvotes: 0

Views: 95

Answers (2)

Midhun Darvin
Midhun Darvin

Reputation: 1255

The tr and td tags are not nested inside a table tag and there is a typo where you have used events.tags instead of event.tags

    <table>
       <tr>
          <td ng-repeat="tag in event.tags">{{ tag.name }}</td>
        </tr>
     <table>

Here is a working fiddle.

Upvotes: 2

user2954587
user2954587

Reputation: 4871

Try removing the s on the end of events

<td ng-repeat="tag in event.tags">{{ tag.name }}</td>

Upvotes: 1

Related Questions