Question

我是角度初学者，我有一个像这样的动态列表

{.name:superParent,id:0,parrentId:null}
{.name:a,id:1,parrentId:0}
{.name:b,id:2,parrentId:0}
{.name:c,id:3,parrentId:1}
{.name:e,id:4,parrentId:3}
{.name:d,id:5,parrentId:2}

如何使用angular和Recursive模板将其实现为嵌套列表？而且我想在每个属性或属性中保留每个item-id

我创建了这个，但它没有显示树，我只能在li中使用ng-repeat时才能看到数据

        <ul>
            <li ng-repeat="col in tree">{{col.Name}}</li>
        </ul>

    </div>

</div>



<script>
    var app = angular.module('APP', []);


    app.controller('IndexCtrl', function ($scope, $http) {

    $scope.tree = [];

    $scope.getList = function () {

        //get data from server
        $http.get("/person/GetTree")
            .then(function (data) {
                console.log("data:", data);
                $scope.tree = data.data;
                $scope.loading = false;

            } )
    }
    $scope.getList();

});

app.directive('treeView', ['$compile', function($compile) {
    return {
        priority : 0,
        restrict : "E",
        replace : true,
        scope : {
            head: "=head",
            children: "=children"
        },
        template: '<div><h4 id="{{head.id}}" ng-show="head.id>0">{{head.Name}}</h4>  <ul> <li ng-repeat="item in items"> <tree-view head="item" children="children"></tree-view> </li>  </ul></div>',
        controller : ['$scope', function ($scope) {
            var array = $scope.children;
            var head = $scope.head;            
            //I used plugin linq.js
            $scope.items = array.filter(function(val){
                return val.parrentId==head.id;
            });                        
        }],

        compile : function compile(element) {
            var contents = element.contents().remove();
            var contentsLinker;

            return function (scope, iElement) {
                if (angular.isUndefined(contentsLinker)) {
                    contentsLinker = $compile(contents);
                }

                contentsLinker(scope, function (clonedElement) {
                    iElement.append(clonedElement);
                });
            };
        }
    };
}]);

Answer 1

您可以看到 example 。

首先，我将主头项目添加到您的集合中（它将是所有其他项目的超级父项目）：

{ name: "superparent", id: 0, parentId: null }

然后你的收藏将如下所示：

tree = [
   {name:'superparent',id:0,parrentId:Null},
   {name:'a',id:1,parrentId:0},
   {name:'b',id:2,parrentId:0},
   {name:'c',id:3,parrentId:1},
   {name:'e',id:4,parrentId:3},
   {name:'d',id:5,parrentId:2},
];

我们所能做的 - 用这样的html模板创建递归指令（treeView）：

<div>
    <h4 id="{{head.id}}" ng-show="head.id>0">{{head.name}}</h4>
    <ul>
        <li ng-repeat="item in items">
            <tree-view head="item" children="children"></tree-view>
        </li>
    </ul>
</div>

我使用的是TypeScript，但我确定你很容易找不到这段代码（d.compile函数取自this answer）：

        module Directives {

            export interface TreeItem {
                name: string;
                parrentId?: number
                id: number;
            }

            TreeView.$inject = ['$compile'];
            export function TreeView($compile): ng.IDirective {
                var d: ng.IDirective = {};
                d.priority = 0;
                d.restrict = "E";
                d.replace = true;
                d.scope = {
                    head: "=head",
                    children: "=children"
                };
                d.templateUrl = '/somepath/treeView.html';
                d.controller = ['$scope', function ($scope) {
                    var array: Array<TreeItem> = $scope.children;
                    var head: TreeItem = $scope.head;            

                    $scope.items = array.filter(function(val){
                        return val.parrentId==head.id;
                    });                        
                }];

                d.compile = function compile(element) {
                    var contents = element.contents().remove();
                    var contentsLinker;

                    return function (scope, iElement) {
                        if (angular.isUndefined(contentsLinker)) {
                            contentsLinker = $compile(contents);
                        }

                        contentsLinker(scope, function (clonedElement) {
                            iElement.append(clonedElement);
                        });
                    };
                };

                return d;
            }
        }

最后，进入你的html页面，将以这种方式插入指令，其中你猜到的树[0]是超级父：

<tree-view head="tree[0]" children="tree" ng-if="tree"></tree-view>

如何使用angular创建父子列表

1 个答案: