Question

问题

我正在尝试管理一些由大型嵌套json字符串填充的选择列表。我将尽可能清楚地解释这一点 -

有5个级别（json中彼此嵌套）可以分支出来。最高级别在第一个下拉列表中填充，最低级别在最后一个下载。

当用户登陆他的页面时，只有最顶层的人员填充了json中最多的父级别项目。选择此项目后，下面的4个下拉菜单将填充所有子项目（与父项级别相对应）。每次从上到下按顺序选择下拉菜单时，它会根据选择优化下面的下拉菜单，一直到第4个选择，然后将第5个项目简化为1个子数组，基于以前的choces - 有点像 -

parent[choice1].parent[choice2].parent[choice3].parent[choice4].child; (if that makes sense)

我的尝试

基于此，这是我在角度尝试的。我基本上设置了第一个下拉到达时填充，然后为每个级别选择器设置更改功能，这将相应地更改下面的那些。这就是看起来的样子（警告 - 它很乱）。

$scope.scope1Change = function() {
        //clear arrays for fresh use
        $scope.array3.length = 0;
        $scope.array4.length = 0;
        $scope.array5.length = 0;

        $scope.array2 = $scope.array[$scope.array.indexOf($scope.scope1)].areas;

        angular.forEach($scope.array[$scope.array.indexOf($scope.scope1)].areas, function(index) {
            angular.forEach(index.sections , function(indx){
                $scope.array3.push(indx);
            });
        });

        angular.forEach($scope.array[$scope.array.indexOf($scope.scope1)].areas, function(tex) {
            angular.forEach(tex.sections , function(texi){
                angular.forEach(texi.lessons , function(texa){  
                    $scope.array4.push(texa);       
                });
            });
        });

        angular.forEach($scope.array[$scope.array.indexOf($scope.scope1)].areas, function(tex) {
            angular.forEach(tex.sections , function(texi){
                angular.forEach(texi.lessons , function(texa){
                    angular.forEach(texa.skills , function(texo){
                        $scope.array5.push(texo);
                    });
                });
            });
        });
    };

    //function for level 3 (2 has changed)
    $scope.scope2Change = function() {
        //clean arrays

    $scope.array4.length = 0;
    $scope.array5.length = 0;

    $scope.array3 = $scope.array[$scope.array.indexOf($scope.scope1)].areas[$scope.array2.indexOf($scope.scope2)].sections;

        angular.forEach($scope.array[$scope.array.indexOf($scope.scope1)].areas[$scope.array2.indexOf($scope.scope2)].sections, function(tex) {

            angular.forEach(tex.lessons , function(texi){

                    $scope.array4.push(texi);

            });
        });

angular.forEach($scope.array[$scope.array.indexOf($scope.scope1)].areas[$scope.array2.indexOf($scope.scope2)].sections, function(tex) {

            angular.forEach(tex.lessons , function(texi){
                angular.forEach(texi.skills , function(texo){
                    $scope.array5.push(texo);
                });
            });
        });

    };

    //function for level 4 (3 has changed)
    $scope.scope3Change = function() {
        $scope.array5.length = 0;
        $scope.array4 = $scope.array[$scope.array.indexOf($scope.scope1)].areas[$scope.array2.indexOf($scope.scope2)].sections[$scope.array3.indexOf($scope.scope3)].lessons;

        angular.forEach($scope.array[$scope.array.indexOf($scope.scope1)].areas[$scope.array2.indexOf($scope.scope2)].sections[$scope.array3.indexOf($scope.scope3)].lessons, function(tex) {
            angular.forEach(tex.skills , function(texi){
                $scope.array5.push(texi);
            });
        });
    };

    //function for level 5 (4 has changed)
    $scope.scope4Change = function() {
        $scope.array5 = $scope.array[$scope.array.indexOf($scope.scope1)].areas[$scope.array2.indexOf($scope.scope2)].sections[$scope.array3.indexOf($scope.scope3)].lessons[$scope.array4.indexOf($scope.scope4)].skills;
    };

这样可以一直完成1次点击，但是当您更改最高级别然后尝试向下搜索（底部返回空白）时会出现问题。我相信这是因为每次我设定长度= 0，但我老实说不是肯定的。

我的疑虑

我对此有两个顾虑。

1是循环中的循环 - 我觉得必须有一个更好的方法，这似乎不是最好的方法，但这是我能想到的这个场景，我＆＃ 39;我不知道如何搜索这样的答案。

2 - 如果我在一个大块中收到JSON，那么通常会有更好的方法来处理它。我试图避免每次请求一个级别时都要发出$ http请求，所以我更愿意继续收到大奖。 json并为我准备了角度。我不知道这对我的表现有什么作用，我认为它不会坏。

除了这些问题之外，这种方法似乎只有在我降落并经历自上而下的下降时才起作用。如果我将最高级别更改为另一级别然后再返回，则尝试再次选择向下，底部2将返回空白。即使我只是再次选择最高级别，最底部的一个是空白的，不应该是。我相信我在这里忽略了一些东西，但总的来说我想看看除了循环中的嵌套循环之外还有其他方法（这可能是问题的一部分）。

非常感谢任何/所有见解。感谢您抽出宝贵时间阅读。

编辑：我在这里做了一个清晰的问题 - http://plnkr.co/edit/4snKCMaty9ZFl6pWLkjU?p=preview

编辑2 请忽略plunker中的架构，它的唯一目的是测试它的假数据 - 它就在那里你可以从默认范围开始并移动从那里向下。

在级联下拉菜单中管理嵌套json（以角度为单位）

0 个答案: