Why doesn't angularjs ng-repeat work properly?

Question

I have some code that for some reason I can't split up:

<li class="task-list-item done">
<div class="task-icon">
    <a href="javascript:;">
        <i class="fa fa-database"></i>
    </a>
</div>
<div class="task-status">
    <a class="done" href="javascript:;">
        <i class="fa fa-check"></i>
    </a>
    <a class="pending" href="javascript:;">
        <i class="fa fa-close"></i>
    </a>
</div>
<div class="task-content">
    <h4 class="uppercase bold">
        <a href="javascript:;">Directive</a>
    </h4>
    <p>blagh {{unit.elements.journal.definition.directive}}</p>
</div>
</li>

renders fine

but

<li ng-repeat="definition in unit.elements.journal.definition" class="task-list-item done">
    <div class="task-icon">
        <a href="javascript:;">
        <i class="fa fa-database"></i>
        </a>
    </div>
    <div class="task-status">
        <a class="done" href="javascript:;">
        <i class="fa fa-check"></i>
        </a>
        <a class="pending" href="javascript:;">
        <i class="fa fa-close"></i>
        </a>
    </div>
    <div class="task-content">
        <h4 class="uppercase bold">
        <a href="javascript:;">Directive</a>
        </h4>
        <p>blagh {{definition.directive}}</p>
    </div>
</li>

doesn't work.

Why can't I nest ng-repeat properly? I've done something similar before and I didn't have any issues, and right now I don't even know how to debug this properly. This makes no sense to me.

i belive unit.elements.journal.definition.directive is object. try (key, value) in unit.elements.journal.definition — ram1993
– ram1993, Commented Oct 5, 2016 at 16:46
when you aren't absolutely sure it's easy to inspect what you are working with in view doing: <pre>{{unit.elements.journal.definition | json}}</pre> — charlietfl
– charlietfl, Commented Oct 5, 2016 at 17:05

Luís Brito · Accepted Answer · 2016-10-05 16:48:40Z

2

Are you sure unit.elements.journal.definition is an array? Based on your snippet is seems like an object because you're calling a property from it unit.elements.journal.definition.

Try this and see if it renders properly, if it does that's certainly a problem in your array.

<li ng-repeat="definition in [{directive: 'test'}]" class="task-list-item done">
  <div class="task-icon">
    <a href="javascript:;">
    <i class="fa fa-database"></i>
    </a>
  </div>
  <div class="task-status">
    <a class="done" href="javascript:;">
    <i class="fa fa-check"></i>
    </a>
    <a class="pending" href="javascript:;">
    <i class="fa fa-close"></i>
    </a>
  </div>
  <div class="task-content">
    <h4 class="uppercase bold">
      <a href="javascript:;">Directive</a>
    </h4>
    <p>blagh {{definition.directive}}</p>
  </div>
</li>

answered Oct 5, 2016 at 16:48

Luís Brito

1,7622 gold badges17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hao ramirez Over a year ago

it isn't an array... I guess that's causing the issue. Stupid me. Thank you!

Collectives™ on Stack Overflow

Why doesn't angularjs ng-repeat work properly?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related