Получение динамических c визуализированных выпадающих списков на основе значения его родителя в AngularJS - PullRequest
0 голосов
/ 18 апреля 2020

Я пытаюсь получить автоматически выпадающий элемент dropdowns только в том случае, если есть значение из его родительской категории и если в этой категории есть какое-то значение Type, если нет, скрыть от просмотра в форме.

Вот код, который у меня до сих пор:

angular.module('app', []).controller("ctrl", function ($scope) {
    $scope.data = [{
            "id": 1,
            "name": "Lvl1 Example 1",
            "children": [{
                    "id": 4,
                    "name": "Lvl2 Example 4",
                    "children": [{
                        "id": 8,
                        "name": "Lvl3 Example 8",
                    }]
                },
                {
                    "id": 5,
                    "name": "Lvl2 Example 5",
                    "children": [{
                        "id": 9,
                        "name": "Lvl3 Example 9",
                    }]
                }
            ]
        },
        {
            "id": 2,
            "name": "Lvl1 Example 2",
            "children": [{
                "id": 6,
                "name": "Lvl2 Example 6",
                "children": [{
                    "id": 10,
                    "name": "Lvl3 Example 10",
                }]
            }]
        },
        {
            "id": 3,
            "name": "Lvl1 Example 3",
            "children": [{
                "id": 7,
                "name": "Lvl2 Example 7",
                "children": [{
                    "id": 11,
                    "name": "Lvl3 Example 11",
                    "children": [{
                       "id": 12,
                       "name": "Lvl4 Example 12",
                       "children": [{
                           "id": 25,
                           "name": "Lvl6 Example 13",
                       }]
                   }]
                }]
            }]
        }
    ]
});
<div ng-app="app" ng-controller="ctrl">
<select ng-model="select1" ng-options="node as node.name for node in data"></select><hr>

<lable>Subcategory</label><br/>

<select ng-model="select2" ng-options="node as node.name for node in select1.children"></select><hr>

<!-- Hide/Show if Subcategory has a object/value in his children array or render dropdown if objects exists also if the same object has more types ex: 3-10 types in multidimensional array childrens[] -->

<label>Type 1</label><br/>
<select ng-model="select3" ng-options="node as node.name for node in select2.children"></select><br>
<label>Type 2</label><br/>
<select ng-if="select2.children" ng-model="select4" ng-options="node as node.name for node in select3.children"></select><br/>
<label>Type 3</label><br/>
<select ng-if="select3.children" ng-model="select5" ng-options="node as node.name for node in select4.children"></select><br/>



<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

Я подумал, что это будет каким-то образом возможно с "ng-if", если я буду выполнять итерации по ng-моделям, ну ... плохая идея, также в между тем динамически отображается Types, если Subcategory имеет какое-либо значение типа или более. Нечто похожее на это: Plunker

Конечно, без кнопок в качестве триггеров для следующего нового элемента div, а не выбранного значения в раскрывающемся списке.

Любая идея приветствуется .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...