如何在角度js中显示嵌套列表

时间:2013-02-27 08:29:33

标签: angularjs

我有这个用于学生记录的html代码及其良好的工作

<li ng:repeat="student in students">
        <a href='#/student/{{ student.id }}'>{{ student.number }}</a>
</li>

但我几乎没有更多嵌套级别的细节,我希望像这样显示

<ul>
<li ng:repeat="student in students">
            <a href='#/student/{{ student.id }}'>{{ student.number }}</a>
             if {{ student.subjects}} > 0
              //some indenting
                 <ul>
             <li ng:repeat="subject in subjects">
                        <a href='#/student/subject/{{ subject.id }}'>{{ subject.name }}</a>
                         if {{ subjects.assignments}} > 0
                         <ul>
                         <li ng:repeat="subject in subjects">
                        <a href='#/student/subject/assignment/{{ assignment.id }}'>{{ assignment.name }}</a>
                        <li>
                         </ul>
            <li>
             </ul>
        </li>
        </ul>

但我不知道角度语法,我该怎么做

1 个答案:

答案 0 :(得分:6)

您可以在子UL元素上使用ng-show,并在其自己的ng-repeat中迭代每个级别。注意:您不需要像if {{ student.subjects}} > 0这样的东西(这不是一个有效的JS代码顺便说一句)。如果集合为空,则ngRepeat不会迭代:

<ul>
  <li ng-repeat="student in students">
    <a href='#/student/{{ student.id }}'>{{ student.number }}</a>
    <ul ng-show="student.subjects && student.subjects.length">
      <li ng-repeat="subject in student.subjects">
        <a href='#/student/subject/{{ subject.id }}'>{{ subject.name }}</a>
          <ul ng-show="subject.assignments && subject.assignments.length">
            <li ng-repeat="assignment in subject.assignments">
              <a href='#/student/subject/assignment/{{ assignment.id }}'>{{ assignment.name }}</a>
            <li>
          </ul>
      <li>
    </ul>
  </li>
</ul>