Javascript 双面级联选择选项

我创建了2个选择框，从json文件中获取数据，工作正常，唯一的问题是在我的第二个选择框中，如果我开始选择任何选项，选择框中的选项开始复制相同的选项，这会让一切变得一团糟

这是我的密码： json:

js:

选择类别
选择子类别
@{{child}}

问题在于，由于模型的原因，选择了反映在json中的值。请使用正确的ng模型
你可以看看这个，它已经测试过了

试试这个例子。改变json结构。我使用了自己的json。工作正常

<div ng-app ng-controller="SelectController">
 <select ng-model="category" ng-options="c.name for c in sampleProductCategories"></select>
 <select ng-model="categoryItem" ng-options="p.name for p in category.products"></select>
</div>

---

为什么要使用选项？您可以使用ng选项它不起作用，类别选择选项没有任何内容您不能对ng模型使用相同的变量它会超过值请看一次如果您的问题得到解决请告诉我其他方面我会给您解释。我不同意您的问题我已在ng模型的子类别中删除=“SupportCtrl.supportMail.selected.childs[0]”，现在工作正常，唯一的问题是，如果我更改类别（第一次选择），我选择了一个类别，而不是从子类别中选择第二个选项，在子类别中，第二个选项保留在那里，在更改类别后，它应该始终转到第一个选项。你能给我完整的json结构吗？问题是，我需要输入已经填充了第一个类别和第一个子类别。

<form>
<div class="form-group question-wrapper">
                <label class="label-support" for="">Choose Category</label>
                <!--  ng-options="option as option.label for (option, child) in SupportCtrl.options" -->
                <select class="form-control"
                        name="category"
                        ng-options="option.label for option in SupportCtrl.options track by option._id"
                        ng-model="SupportCtrl.supportMail.selected">
                </select>

            </div>

            <div class="form-group question-wrapper">
                <label class="label-support"  for="">Choose Sub Category</label>
                <select id="sub" class="form-control"
                        name="subcategory"
                        ng-model="SupportCtrl.supportMail.selected.childs[0]">
                    <option ng-repeat="child in SupportCtrl.supportMail.selected.childs track by $index">@{{child}}</option>
                </select>
            </div>

</form>

<div class="form-group question-wrapper">
                    <label class="label-support"  for="">Choose Sub Category</label>
                    <select id="sub" class="form-control"
                            name="subcategory"
                            ng-model="selectedoption">
       <option ng-hide="!$first"></option>  //this will hide first black option
                        <option  value="{{child}}" ng-repeat="child in SupportCtrl.supportMail.selected.childs track by $index">{{child}}</option>

                    </select>
                </div>

$scope.SupportCtrl={ 
supportMail:{selected:{ 
    "_id": "2",
    "label": "Category 2",
    "childs": [
      "subtitle_1 from Category_2",
      "subtitle_2 from Category_2",
      "subtitle_3 from Category_2",
      "subtitle_4 from Category_2",
      "subtitle_5 from Category_2",
      "subtitle_6 from Category_2"
    ]
  } 
  }  
}

<div ng-app ng-controller="SelectController">
 <select ng-model="category" ng-options="c.name for c in sampleProductCategories"></select>
 <select ng-model="categoryItem" ng-options="p.name for p in category.products"></select>
</div>

function SelectController($scope) {
    // Data taken from KnockoutJs cart example
    $scope.sampleProductCategories = [
      {
        "name": "Classic Cars",
          "products": [
          {
            "name": "1948 Porsche 356-A Roadster",
              "options":[
                  {"value": "Color",
                   "options":[
                  {"value": "Red"},
                  {"value":"Black"}
                  ],                                    
               },
                  {"value":"Seats",
                  "options":[
                  {"value": "Leather"},
                  {"value":"Cloth"}
                  ],    

                  },

                 {"value":"Warranty",
                  "options":[
                  {"value": "2 Year"},
                  {"value":"3 Year"}
                  ],    

                  } 

              ],
            "price": 53.9
          },
          {
            "name": "1948 Porsche Type 356 Roadster",
            "price": 62.16
          },
          {
            "name": "1949 Jaguar XK 120",
            "price": 47.25
          }
        ]

      },
      {
        "name": "Motorcycles",
        "products": [
          {
            "name": "1936 Harley Davidson El Knucklehead",
            "price": 24.23
          },
          {
            "name": "1957 Vespa GS150",
            "price": 32.95
          },
          {
            "name": "1960 BSA Gold Star DBD34",
            "price": 37.32
          }
        ]

      },
      {
        "name": "Planes",
          "products": [
          {
            "name": "1900s Vintage Bi-Plane",
            "price": 34.25
          },
          {
            "name": "1900s Vintage Tri-Plane",
            "price": 36.23
          },
          {
            "name": "1928 British Royal Navy Airplane",
            "price": 66.74
          },
          {
            "name": "1980s Black Hawk Helicopter",
            "price": 77.27
          },
          {
            "name": "ATA: B757-300",
            "price": 59.33
          }
        ]

      }
    ];
}