使用angular js链接两个选择框 [英] Link two select boxes using angular js

问题描述

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

I want to link two select boxes , with change in one will change other.

以下是我的代码

{
  "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中选择了英语，则请选择框2选项键= John1，value-Doe1.

In the given code first dropdown should show only -English,Maths while other will show -lastName based on item chosen, so if English is chosen in select box-1 then select box-2 option 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>

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

In addition to this i would like to have In the second dropdown we are populating the values in select box label. I also need to add option values which is related to code. So this would result in something like this

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

推荐答案

只需将ng-options绑定到selected_language:

Just bind the ng-options to the 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>

此处是工作中的矮人

更新

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

You can use track by to specify the value of the options:

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

我也更新了塞子.

更新II

在这里，您有两个选择.您可以在控制器中设置选定的值:

Here you have two options. You can set the selected value in the controller:

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

或您将以下内容添加到选择标签:

or you add the following to the select tag:

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

我更新了我的矮人

这篇关于使用angular js链接两个选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！