javascript - 为什么 angularjs ng-repeat 不能正常工作？

Question

我有一些代码，由于某种原因我无法拆分:

<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？我以前做过类似的事情，但没有遇到任何问题，现在我什至不知道如何正确调试它。这对我来说毫无意义。

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