Question

我想链接两个选择框，其中一个更改将更改其他框。

以下是我的代码

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

在给定代码中，第一个下拉列表应仅显示-English，Maths，而其他将根据所选项目显示-lastName，因此，如果在选择框-1中选择英语，则选择box-2选项键= 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>

Answer 1

只需将ng-options绑定到selected_language：

  <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>

here是工作人员

<强>更新

您可以使用track by指定选项的值：

<select id="select_sex" ng-model="selectedSex" ng-options="item.sex for item in selectedLanguage track by item.code"></select>

我也更新了plunker。

更新II

这里有两个选项。您可以在控制器中设置所选值：

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

或者将以下内容添加到select标记：

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

我更新了我的plunker

Answer 2

怎么样：

<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>

使用角度js链接两个选择框

2 个答案: