將數組轉換爲嵌套列表

Angular相當新穎，我試圖做一些非常規操作。將數組轉換爲嵌套列表

說我有一個這樣的數組：["A","B","C","D","E","F","G"];

我想輸出HTML這樣的：

<ul> 
    <li>A</li> 
    <ul> 
     <li>B</li> 
     <ul> 
      <li>C</li> 
      <ul> 
       <li>D</li> 
       <ul> 
        <li>E</li> 
        <ul> 
         <li>F</li> 
         <ul> 
          <li>G</li> 
         </ul> 
        </ul> 
       </ul> 
      </ul> 
     </ul> 
    </ul> 
</ul>

從本質上講，我只是想繼續築巢，直到我打了數組的結尾。我無法弄清楚如何做到這一點。不幸的是，我沒有任何代碼示例，因爲如果不在while循環中凍結瀏覽器，我無法做到這一點。

儘管如此，這裏是我得到了什麼：

<div class="trail" ng-include="'trail'"></div> 
<script type="text/ng-template" id="trail"> 
    <li>{{trailItem.content}}<li> 
    <ul ng-repeat="trailItem in post.trail" ng-include="'trail'"> 
    </ul> 
</script>

以上是指具有一個數據結構，其中post是對象的數組，其中content是一個屬性的工作。

但是，這會永久循環，並且瀏覽器會凍結。

來源

2015-07-13 Jake

請出示你已經在角 –

不知道有關環路嘗試過，但看看這個[小提琴]（http://jsfiddle.net/zeck/VNX29/4/） –

var ary = ["A", "B", "C", "D", "E", "F", "G"]; 
 
var $container = $('<div></div>'); 
 
var dom = $container; 
 
for (var i = 0; i < ary.length; i++) { 
 
    dom = appendDom(dom, ary[i]); 
 
} 
 
function appendDom(dom, value) { 
 
    var $ul = $('<ul><li>' + value + '</li></ul>'); 
 
    $(dom).append($ul); 
 
    return $ul; 
 
} 
 
alert($container.html());

輸出是你需要

來源

2015-07-13 04:48:07

我一直希望得到一個DOM內解決方案，而不是在幕後操縱DOM的東西網元。 – Jake

@Jake - 「in-DOM」是什麼意思？您必須在DOM之外創建DOM元素，然後添加它們。除非你打算建立一個巨大的HTML字符串（這是解決這個問題的更難的方法），否則沒有別的辦法。 – jfriend00

@ jfriend00夠公平的 – Jake

我無法得到它與一個維數組工作完全像你貼，但我沒有找到一個的jsfiddle一個很好的例子在http://benfoster.io/blog/angularjs-recursive-templates

而且，這裏是我到目前爲止有：

http://jsfiddle.net/haydenk/s19v2f1m/3/

<div ng-controller="MainCtrl"> 
    <script type="text/ng-template" id="awesomeTree"> 
    {{ awesomeThing }} 
    <ul ng-if="awesomeThings"> 
     <li ng-repeat="awesomeThing in awesomeThings" ng-include="'awesomeTree'"></li> 
    </ul> 
    </script> 
    <ul> 
     <li ng-repeat="awesomeThing in awesomeThings" ng-include="'awesomeTree'"></li> 
    </ul> 
</div> 



var app = angular.module('testApp',['ngAnimate']); 

app.controller('MainCtrl', function ($scope) { 
    $scope.awesomeThings = ['A','B','C','D','E','F','G','H']; 
    });

來源

2015-07-13 05:17:48 Hayden

試試這個。

HTML：

<div ng-controller="testCtrl"> 
    <div add-ul-li arr-list-val=arrList> 
    </div> 
</div>

JS：

app.controller("testCtrl",function($scope){ 

    $scope.arrList = ["A","B","C","D","E","F","G"]; 


}) 
.directive("addUlLi",function(){ 
    var finalHtml=""; 
    return { 
     scope : {arrListVal: '='}, 

     link: function(scope,ele,attr){ 
      scope.arrListVal.reverse(); 

      angular.forEach(scope.arrListVal,function(oneElement,key){ 
       console.log(key) 
       if(key==0){ 
        finalHtml = "<ul> <li>"+oneElement+"</li> </ul>"; 

       }else{ 

        finalHtml = "<ul> <li>"+oneElement+" "+finalHtml+"</li> </ul>"; 

       } 

       if((key+1)==scope.arrListVal.length){ 
        ele.append(finalHtml); 
       } 
      }) 
     } 
    } 
})

入住這plunker

來源

2015-07-13 06:15:22

將數組轉換爲嵌套列表

回答

相關問題