CODEWITHSUNDEEP
angularjsng-options
saurabh jain
saurabh jain

Reputation: 167

Link two select boxes using angular js

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

Following is my code

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

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>

Upvotes: 1

Views: 3453

Answers (2)

boindiil
boindiil

Reputation: 5865

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>

here is the working plunker

Update

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>

I have updated the plunker too.

Update 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']"

I have updated my plunker

Upvotes: 2

Lowe B&#228;ckstr&#246;m
Lowe B&#228;ckstr&#246;m

Reputation: 439

How about:

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

Upvotes: 1

Related Questions