基于使用angular的下拉列表中选定的对象来迭代对象中的对象？

Question

下面是我的json：

{
    "heavy vehicles": {
        "trucks": [
            "tata",
            "jvc"
         ]
    },
    "light vehicles": {
        "cars": [
            "alto",
            "wagonr"

        ],
        "jeeps": [
            "abc",
            "def"
         ]
    },
}

我想要做的是:他们有3个下拉列表，一个是选择车辆类型的值:选项将是重型和轻型车辆，第二个下拉列表应该填充基于所选车辆类型的值如果选择重型车辆，则选项将是卡车，第三个下拉列表将具有基于第二个下拉列表的值如果选择卡车，选项将是塔塔和jvc。

我能够在一个下拉列表中遍历第一级对象，如何根据在第一级中选择的下拉列表遍历第二级对象。

所有数据都是动态的，任何级别的值都可以更改

热心的帮助

我的js代码：

processList = [];

for (var key in response) {      
                        if (response.hasOwnProperty(key))
                        processList.push(key);
                        console.log("object" +  processList);
                        }

Answer 1

试着这样做。

​

var app = angular.module("app",[]);

app.controller("MyCtrl" , function($scope){
  
  $scope.data = {
    "heavy vehicles": {
        "trucks": [
            "tata",
            "jvc"
         ]
    },
    "light vehicles": {
        "cars": [
            "alto",
            "wagonr"

        ],
        "jeeps": [
            "abc",
            "def"
         ]
    },
};
  
  $scope.initSelect2 = function(key){
    $scope.select2 = [];
      angular.forEach($scope.data,function(v,k){
          if(key === k)
            $scope.select2.push(v);
        });
    }
  
  $scope.initSelect3 = function(key1,key2){
      $scope.select3 = [];
      angular.forEach($scope.data,function(v,k){
          if(key1 === k)
           {
             angular.forEach(v,function(v1,k1){
                 if(key2 === k1)
                   $scope.select3.push(v1);
               })
           }
        });
    }
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   
  <select ng-model="model1" ng-options="key as key for (key,value) in data" ng-change="initSelect2(model1)"></select>
  <select ng-model="model2" ng-options="key1 as key1 for (key1,value1) in select2[0]" ng-change="initSelect3(model1,model2)"></select>
    <select ng-model="model3" ng-options="key2 as key2 for key2 in select3[0]"></select>
  
</div>

​