Javascript 将数组转换为嵌套列表

对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是一个对象数组，内容是其属性

但是，这将永远循环，浏览器将冻结。

变量ari=[A，B，C，D，E，F，G]； var$container=$； var dom=$container； 对于var i=0；i警报$container.html 我无法让它完全与您发布的一维数组一起工作，但我确实发现了一个非常好的JSFIDLE示例

此外，以下是我目前掌握的情况：

试试这个

HTML:

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

JS:

---

检查此项

请显示您在Angular中已经尝试过的内容不确定循环，但请检查此项我希望在DOM中找到解决方案，而不是在幕后操纵DOM的东西。@Jake-在DOM中意味着什么？您必须在DOM之外创建DOM元素，然后添加它们。没有其他方法，除非你只是构建一个巨大的HTML字符串，这是解决这个问题的更难的方法。@jfriend00足够公平了

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

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