Javascript 如何使用angular创建父子列表

我是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}

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

如何使用角度和递归模板将其实现为嵌套列表？我还想将其中的每个项目id保存在某个属性或属性中

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

我创建了这个，但它没有显示树，我只能在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);
                });
            };
        }
    };
}]);

{{col.Name}

var-app=angular.module（'app'，[]）；
app.controller（'IndexCtrl'，函数（$scope，$http）{
$scope.tree=[]；
$scope.getList=函数（）{
//从服务器获取数据
$http.get（“/person/GetTree”）
.then（功能（数据）{
日志（“数据：”，数据）；
$scope.tree=data.data；
$scope.loading=false；
} )
}
$scope.getList（）；
});
app.directive（'treeView'，['$compile'，function（$compile）{
返回{
优先级：0，
限制：“E”，
替换：正确，
范围：{
头：“=头”，
儿童：“=儿童”
},
模板：{{head.Name}
，
控制器：['$scope'，函数（$scope）{
var数组=$scope.children；
var head=$scope.head；
//我使用了linq.js插件
$scope.items=array.filter（函数（val）{
return val.parrentId==head.id；
});                        
}],
编译：函数编译（元素）{
var contents=element.contents（）.remove（）；
var内容链接器；
返回函数（范围、元素）{
if（角度.isUndefined（contentsLinker））{
contentsLinker=$compile（内容）；
}
ContentsLink（范围、功能（clonedElement）{
附加（克隆元素）；
});
};
}
};
}]);

您可以看到

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

首先，我将主标题项添加到您的收藏中（它将是所有其他项的超级父项）：

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

然后，您的收藏将如下所示：

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

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）：

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

<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>

{{head.name}

我使用了TypeScript，但我相信您会很容易理解这段代码（d.compile函数取自）：

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

模块指令{
导出接口树项{
名称：字符串；
parrentId？：数字
id：编号；
}
TreeView.$inject=['$compile']；
导出函数TreeView（$compile）：ng.IDirective{
变量d:ng.IDirective={}；
d、 优先级=0；
d、 restrict=“E”；
d、 替换=真；
d、 范围={
头：“=头”，
儿童：“=儿童”
};
d、 templateUrl='/somepath/treeView.html'；
d、 控制器=['$scope'，函数（$scope）{
变量数组：数组=$scope.children；
var head:TreeItem=$scope.head；
$scope.items=array.filter（函数（val）{
return val.parrentId==head.id；
});                        
}];
d、 compile=函数compile（元素）{
var contents=element.contents（）.remove（）；
var内容链接器；
返回函数（范围、元素）{
if（角度.isUndefined（contentsLinker））{
contentsLinker=$compile（内容）；
}
ContentsLink（范围、功能（clonedElement）{
附加（克隆元素）；
});
};
};
返回d；
}
}

最后，在html页面中，指令将以这种方式插入，其中树[0]如您所猜测的是超级父：

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

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

正如您在问题中看到的，我编辑了我的代码，但它不起作用！！您在控制台有任何异常吗？请显示所有初始html代码（带指令），最好的方法是像我一样在Plunker创建示例。我做了一些修复，请参阅新建。我在html非模板页面上添加了ng if=“tree”内部指令。不要在控制器的开头初始化$scope.tree=[]，只保留$scope.tree=data.data；在$http.get（）.then（）方法链中。我在$interval的帮助下模拟$http请求。