我正在建设一个工具来帮助用户浏览我们的网站。该AngularJS功能从其他服务接收到一个JSON对象，然后打印出一个HTML5列表。

的html格式的形式应为

 ＆LT; UL＆GT;＆LT;立GT;根  ＆LT; UL＆GT;      ＆LT;立GT;        2儿童        ＆LT; UL＆GT;          ＆LT;立GT;儿童大1 LT; /李＆GT;          ＆LT;立GT;大儿童2'; /李＆GT;        ＆LT; / UL＆GT;      ＆LT; /李＆GT;  ＆LT; / UL＆GT;＆LT; /李＆GT;＆LT; / UL＆GT; 

做一个简单的嵌套NG-重复（如下图所示），将很容易给我一组的孩子，但我不知道什么样的设置最好的方式与角度的函数中，我有一个数目不详子元素。

 ＆LT;李NG重复=中的节点的节点＆GT;    ＆所述; A HREF =＃＆GT; {{node.title}}＆下; / A＆GT;    ＆LT; UL＆GT;        ＆LT;李NG重复=孩子node.children＆GT;            ＆所述; A HREF =＃＆GT; {{child.title}}＆下; / A＆GT;        ＆LT; /李＆GT;    ＆LT; / UL＆GT;＆LT; /李＆GT; 

一个例子JSON对象：

  {    标题：'大学'，    儿童：        {            标题：工程学院，            儿童：                {标题：计算机科学}，                {题目：电气工程}，                {标题：化学工程}，                {标题：生物工程}，                {标题：机械工程}，                {标题：土木工程}，                {标题：环境工程}            ]        }，        {标题：文学院}，        {标题：理学院}，        {标题：数学学院'}    ]} 

解决方案

下面是使用递归局部视图来显示列表中的一个例子。

的 partial.html 的：

 ＆LT; UL＆GT;    ＆LT;李NG重复=C数据＆GT;      {{c.title}}      ＆LT;＆GT;格上=0 c.children.length＆GTNG-开关;        ＆LT; D​​IV NG-开关时=真＆GT;          ＆LT; D​​IV NG-的init =数据= c.children; NG-包括='partial.html'＆GT;＆LT; / DIV＆GT;        ＆LT; / DIV＆GT;      ＆LT; / DIV＆GT;    ＆LT; /李＆GT;＆LT; / UL＆GT; 

演示

I'm working on building a tool to help users navigate our website. The AngularJS function receives a JSON object from another service and then prints out an html5 list.

The html should look like

<ul>
<li>Root
  <ul>
      <li>
        Child 2
        <ul>
          <li>Grand Child 1</li>
          <li>Grand Child 2</li>
        </ul>
      </li>
  </ul>
</li>
</ul>

Doing a simple nested ng-repeat (as seen below) will easily give me a single set of children, but I'm not sure as what the best way to setup a function with Angular in which I have an unknown number of sub elements.

<li ng-repeat="node in nodes">
    <a href="#">{{node.title}}</a>
    <ul>
        <li ng-repeat="child in node.children">
            <a href="#">{{child.title}}</a>
        </li>
    </ul>
</li>

An example JSON object:

{ 
    title:'University',
    children: [
        { 
            title:'College of Engineering',
            children: [
                { title:'Computer Science' },
                { title:'Electrical Engineering' },
                { title:'Chemical Engineering' },
                { title:'Biological Engineering' },
                { title:'Mechanical Engineering' },
                { title:'Civil Engineering' },
                { title:'Environmental Engineering' }
            ]
        },
        { title:'College of Liberal Arts' },
        { title:'College of Science' },
        { title:'College of Math' }
    ]
}

Here is one example to use the recursive partial view to display the list

partial.html:

<ul>
    <li ng-repeat="c in data">
      {{c.title}}
      <div ng-switch on="c.children.length > 0">
        <div ng-switch-when="true">
          <div ng-init="data = c.children;" ng-include="'partial.html'"></div>  
        </div>
      </div>
    </li>
</ul>

DEMO