将数组转换为嵌套列表

问题描述：

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是一个属性的工作。

但是，这会永久循环，并且浏览器会冻结。

请出示你已经在角 –

不知道有关环路尝试过，但看看这个[小提琴]（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());

输出是你需要

我一直希望得到一个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']; 
    });

答

试试这个。

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

将数组转换为嵌套列表

相关推荐