javascript - 使用 Angular 根据下拉列表中选择的对象迭代对象内部的对象？

Question

这是我的 json :

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

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

我想要做的是:它们有 3 个下拉列表，其中一个具有用于选择车辆类型的值:选项将是重型和轻型车辆，第二个下拉列表应根据所选车辆类型填充值，如果选择了重型车辆，则选项将是Truck ，第三个下拉列表将具有基于第二个下拉列表的值，如果选择卡车，则选项将为 tata 和 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>