How can i display nested list in angular js

Question

I have this html code for student records and its working good

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

But i have few few more nested levels of details which i want to show like this

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

But i don't know the angular syntax , how can i do that

Stewie · Accepted Answer · 2013-02-27 20:25:14Z

6

You can use ng-show on child UL elements, and iterate each level in its own ng-repeat. Note: You don't need things like if {{ student.subjects}} > 0 (That's not a valid JS code btw). ngRepeat won't iterate if collection is empty:

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

edited Feb 27, 2013 at 20:25

answered Feb 27, 2013 at 8:39

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

Collectives™ on Stack Overflow

How can i display nested list in angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related