2015-07-13 170 views
0

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

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

+0

请出示你已经在角 –

+0

不知道有关环路尝试过,但看看这个[小提琴](http://jsfiddle.net/zeck/VNX29/4/) –

回答

0

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());

输出是你需要

+0

我一直希望得到一个DOM内解决方案,而不是在幕后操纵DOM的东西网元。 – Jake

+0

@Jake - “in-DOM”是什么意思?您必须在DOM之外创建DOM元素,然后添加它们。除非你打算建立一个巨大的HTML字符串(这是解决这个问题的更难的方法),否则没有别的办法。 – jfriend00

+0

@ jfriend00够公平的 – Jake

0

我无法得到它与一个维数组工作完全像你贴,但我没有找到一个的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']; 
    }); 
0

试试这个。

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