將數組變成嵌套列表

Question

對於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是屬性。

但是，這將永遠循環，瀏覽器將凍結。

Answer 1

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

輸出是您的需要

Answer 2

我無法讓它與您發布的一維數組完全兼容，但是我確實在http://benfoster.io/blog/angularjs-recursive-templates找到了一個很好的jsfiddle示例

另外，這是我到目前為止所擁有的：

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

Answer 3

試試這個。

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

檢查這個矮人