Почему angularjs ng-repeat не работает должным образом?

#javascript #angularjs

Вопрос:

У меня есть некоторый код, который по какой-то причине я не могу разделить:

 <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>

рендерится нормально

но

 <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>

не работает.

Почему я не могу правильно вложить ng-repeat? Я делал что-то подобное раньше, и у меня не было никаких проблем, и сейчас я даже не знаю, как это правильно отладить. Для меня это не имеет смысла.

1. я верю, что unit.elements.journal.definition.directive является объектом. попробуйте (ключ, значение) в unit.elements.journal.definition

2. когда вы не совсем уверены, легко проверить, с чем вы работаете, в представлении: <pre>{{unit.elements.journal.definition | json}}</pre>

Ответ №1:

Вы уверены unit.elements.journal.definition , что это массив? Судя по вашему фрагменту, это похоже на объект, потому что вы вызываете из него свойство unit.elements.journal.definition .

Попробуйте это и посмотрите, правильно ли это отображается, если это так, это, безусловно, проблема в вашем массиве.

 <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>