未知數與AngularJS的子列表

我正在構建一個工具來幫助用戶瀏覽我們的網站。 AngularJS函數接收來自另一個服務的JSON對象，然後打印出一個html5列表。未知數與AngularJS的子列表

的HTML應該像

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

做一個簡單的嵌套NG-重複（如下圖所示），將很容易給我一組的孩子，但我不知道什麼的最好方式用Angular設置一個函數，其中我有一個未知數量的子元素。

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

一個例子JSON對象：

{ 
    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' } 
    ] 
}

來源

2013-12-16 Jacobm001

什麼樣子的JSON對象？ – Blackhole

@Blackhole：我添加了一個示例JSON對象，真實的可能比示例有更深的嵌套。 – Jacobm001

一個想法：創建一個自定義指令，一種'recursiveRepeat'。如果你願意，我會在稍後向你展示一個例子。 – Blackhole

這裏是使用遞歸局部視圖來顯示列表一例

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

來源

2013-12-16 19:10:45 zsong

爲什麼只有一個'ngSwitchWhen'而不是簡單的'ngIf'這個醜陋的'ngSwitch'？爲什麼在這裏部分，而不是一個指令？ – Blackhole

@Blackhole因爲我不確定OP使用哪個版本的AngularJS。但是我確定所有版本都有'ng-switch'works。 'ng-if'僅在1.1.5+中可用。我認爲。 – zsong

這裏寫成指令（jsfiddle）的另一種方法：

angular.module('the-app', []).directive('arbitraryNesting', [ 
'$compile', 
function($compile){ 
    var template = '\ 
<li ng-repeat="datum in data">{{datum.title}}\ 
    <ul ng-if="datum.children && datum.children.length > 0" arbitrary-nesting="datum.children">\ 
    </ul>\ 
</li>'; 

    var compiledTemplate; 

    return { 
     restrict: 'A', 
     scope: { 'data': '=arbitraryNesting' }, 
     terminal: true, 
     link: function(scope, element) { 
      compiledTemplate = compiledTemplate || $compile(template); 

      var newScope = scope.$new(); 

      var linked = compiledTemplate(newScope); 
      element.append(linked); 
     } 
    } 
}])

來源

2013-12-16 19:21:32 FMM

未知數與AngularJS的子列表

回答

相關問題