Angularjs 使用angular js链接两个选择框

我想链接两个选择框，其中一个改变将改变另一个

下面是我的代码

{
  "Maths": [
    {
      "code": "John",
      "lastName": "Doe",
      "sex": "M"
    }
  ],
  "English": [
    {
      "code": "John",
      "lastName": "Doe",
      "sex": "M"
    },
    {
      "code": "John1",
      "lastName": "Doe1",
      "sex": "M1"
    },
    {
      "code": "John"
    }
  ]
}

在给定的代码中，第一个下拉列表应仅显示-英语、数学，而另一个下拉列表将根据所选项目显示-lastName， 因此，如果在选择框1中选择了英语，那么选择框2选项key=John1，value-Doe1

<select id="select_language" ng-model="myColor" ng-options="id  for (id, person) in test"> </select> 
<select id="select_dialect" ></select>

除此之外，我还想 在第二个下拉列表中，我们将填充选择框标签中的值。我还需要添加与代码相关的选项值。 所以这会导致类似的结果

<select id="select_dialect" ng-model="myColor1" ng-options="item.sex for item in myColor" class="ng-valid ng-dirty">
<option value="?" selected="selected"></option>
<option value="John">M</option>
<option value="John1">M1</option>
<option value="John2"></option>
</select>

M
M1

那么：

<select id="select_language" ng-model="myColor" ng-options="id for (id, person) in selectData"></select>
<select id="select_dialect" ng-model="myPerson" ng-options="person.lastName for person in myColor"></select>

---

只需将ng选项绑定到所选的

语言即可

：

  <select id="select_language" ng-model="selectedLanguage" ng-options="id  for (id, person) in data"></select>
  <select id="select_dialect" ng-model="selectedLastName" ng-options="item.lastName for item in selectedLanguage"></select>

我也更新了plunker

更新II

这里你有两个选择。您可以在控制器中设置选定值：

$scope.selectedLanguage = $scope.data["English"];

或者将以下内容添加到“选择”标记：

ng-init="selectedLanguage = data['English']"

---

我已经更新了我的plunker

谢谢@Boindil。。这真的很有帮助！！：）我还有一个问题要问。请在上面找到谢谢@boindil！！谢谢你的帮助！！我还有一个问题要问。。我希望你不会介意：）。。我刚刚意识到我需要将第一个选择框的默认值设置为“English”。。我的错误我刚才跳过了…=我想我也提到了，第一个框中有英语，我想让约翰被选中。为此，我添加了这个，但它没有工作-你能帮忙吗！！以下是具有所有默认值的plunker：

ng-init="selectedLanguage = data['English']"