javascript - 如何使用 Angular 创建父子列表

Question

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

{.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 和递归模板将其实现为嵌套列表？而且我想将每个 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 。

首先，我将主要头项添加到您的集合中(它将成为所有其他项的 super 父项):

{ 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 页面中，其中您猜到的 tree[0] 是 super 父级:

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