Question

我正在尝试使用html表（我使用智能表进行排序/搜索方便）和angularJS来显示嵌套树结构。我所要做的就是重复添加元素以递归方式显示嵌套结构中列出的所有节点。为了实现这一点，我编写了一个指令并使用angular-recursion模块递归调用它。但是在递归期间，元素被添加到父元素下。因此，没有为更深的节点[示例中的child32]添加rows（）。仅显示级别0和级别1节点。

请在此处参阅Plunker代码。

一个原因可能是另一个并不意味着什么，可以忽略不计。我无法找到避免这种情况的方法。

app.directive("nodeTree", function(RecursionHelper, $compile) {
return {
    restrict: "AE",
    controller: 'View1Ctrl',
    template:
    '<tr ng-show=node.childrenVisible>'+
        '<td class="padding node.level"><i class="glyphicon" ng-class="node.type1" ng-click="iconClick(node)"></i> {{node.name1}} </td>' +
        '<td>{{node.size1 | bytes}}</td>' +
        '<td>{{node.date1 | date:"yyyy-MM-dd HH:mm:ss a"}}</td>' +
        '<td>{{node.state}}</td>' +
        '<td class="padding node.level"><i class="glyphicon" ng-class="node.type2" ng-click="iconClick(node)"></i> {{node.name2}} </td>' +
        '<td>{{node.size2 | bytes}}</td>' +
        '<td>{{node.date2 | date:"yyyy-MM-dd HH:mm:ss a"}}</td>' +
    '</tr>'+
    '<tr node-tree ng-show=node.childrenVisible ng-repeat="node in node.nodes"></tr>',
    compile: function(element) {
        return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, transcludeFn){

            scope.iconClick = function(node){
                //node.childrenVisible = !node.childrenVisible;
                node.nodes.forEach(function(entry){
                        entry.childrenVisible = !entry.childrenVisible;
                });
                node.type2 =  (node.type2 == "glyphicon-folder-close" || node.type2 == "glyphicon-folder-open")? (node.type2 == "glyphicon-folder-close" ? "glyphicon-folder-open" : "glyphicon-folder-close") : ((node.type2 == "glyphicon-menu-right")? "glyphicon-menu-right": "") ;
                node.type1 =  (node.type1 == "glyphicon-folder-close" || node.type1 == "glyphicon-folder-open") ? (node.type1 == "glyphicon-folder-close" ? "glyphicon-folder-open" : "glyphicon-folder-close") : ((node.type2 == "glyphicon-menu-right")? "glyphicon-menu-right": "");
            };
        });
    }
};

}）;

以下是我如何调用此指令：

<table st-table="treeData" class="table" id="main_table">
                <thead>
                <tr>
                    <th colspan="2"><input st-search="name1" class="input-sm form-control" placeholder="global search ..." type="search"></th>
                </tr>
                <tr>
                    <th st-sort="name1" style="width:auto">Name</th>
                    <th st-sort="size1" style="width:auto">Size</th>
                    <th st-sort="date1" style="width:auto">Last Modified</th>
                    <th st-sort="state" style="width:auto">State</th>
                    <th st-sort="name2" style="width:auto">Name</th>
                    <th st-sort="size2" style="width:auto">Size</th>
                    <th st-sort="date2" style="width:auto">Last Modified</th>
                </tr>

                </thead>
                <tbody node-tree ng-repeat="node in treeData"></tbody>
            </table>

我是JS，AngularJS和前端的初学者。非常感谢任何帮助。

使用angular-recursion在html表上显示嵌套结构

0 个答案: