子列表的数目不详用AngularJS [英] Unknown number of sublists with AngularJS

问题描述

我正在建设一个工具来帮助用户浏览我们的网站。该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

这篇关于子列表的数目不详用AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！