Получить объект из многомерного массива и отобразить его в раскрывающемся списке - AngularJS

Question

Я пытаюсь получить объект "children" из вложенного массива, проблема в том, как вытащить "children" и отобразить их в выпадающих меню? Например:

[
   {
    "id": 1,
    "name": "someName",
    "children": [
    {
        "id": 2,
        "name": "children_lvl_1",
        "children": [
         {
           "id": 3,
           "name": "children_lvl_2", 
         }
        ]
        "children": [
         {
           "id": 4,
           "name": "children_lvl_3", 
          }
        ]      
      }
    ]
  }
]

Оригинальная идея состоит в том, чтобы получить что-то вроде этого: https://embed.plnkr.co/plunk/Vn1zH5 До сих пор я пробовал что-то подобное ниже, что не было написано мной.

Data.post('documentCategories/read', {}).then(function(results) {
  if (results.status === "success") {
    $scope.model.categories = parseCategories(results.data, -1, $scope.tag);
    $scope.model.categoryTree = results.data;
    var obj = $scope.model.categoryTree = results.data;

    // console.log($scope.model.categoryTree);
    const node = getNode($scope.model.categoryTree, $scope.document.category_id);
    if (node) {
      parseExpirationRanges(node);
      $scope.model.categoryTags.splice(0, $scope.model.categoryTags.length);
      $scope.model.categoryTags = node.categoryTags.slice();
    }
  }

  if (results.status === "error") {
    $.notify(results.message, "error");
  }
  return 0;
});

<div class="form-group">
  <label class="col-sm-4 control-label no-padding-right">Categorys</label>
  <div class="col-sm-8">
    <span class="block input-icon input-icon-right">
      <select ng-model="document.category" class="form-control"
              ng-options="category as category.name for category in model.categoryTree" required></select>
    </span>
  </div>
</div>

Любые идеи fre sh приветствуются. Tnx

Answer 1

Имейте ng-модель для каждого выбора и в ng-вариантах второго и третьего выбора перебирайте .children переменной модели предыдущего выбора

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

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

<div ng-app="app" ng-controller="ctrl">
<select ng-model="select1" ng-options="node as node.name for node in data"></select>
<select ng-model="select2" ng-options="node as node.name for node in select1.children"></select>
<select ng-model="select3" ng-options="node as node.name for node in select2.children"></select>
</div>

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