CODEWITHSUNDEEP
javascriptangularjsangular-material
Daniel Ellison
Daniel Ellison

Reputation: 1349

Angularjs Material - Syncing multiple select boxes

I have a basic HTML form where users can swtich between languages (French, English and bilingual). In the form I have a select box for each language and choices are the same but translated according to the selected language.

I need to have them all synced up so that when user selects option 1, in wichever box, all other boxes will be at option 1. 

  $scope.French_Options = ["Un", "Deux", "Trois"];
  $scope.Bilingual_Options = ["Un/One", "Deux/Two", "Trois/Three"];
  $scope.English_Options = ["One", "Two", "Three"];

<md-input-container>
    <label>French</label>
    <md-select ng-model="selection.french" ng-change="baseValueChange()" >
        <md-option ng-repeat="option in French_Options" ng-value="option "> {{état_fr}} </md-option>
    </md-select>
</md-input-container>                              

<md-input-container>
    <label>Bilingual/ Status</label>
    <md-select ng-model="selection.bilingual" ng-change="Notifications.('Bilingue', $index)" >
        <md-option ng-repeat="option in Bilingual_Options" ng-value="option "> {{état_bilingue}} </md-option>
    </md-select>
</md-input-container>                                                                         

<md-input-container style="margin-top: 5px; margin-bottom: 5px;" flex="25">
    <label>English</label>
    <md-select ng-model="selection.english" ng-change="baseValueChange()>
        <md-option ng-repeat="option in English_options" ng-value="option "> {{état_en}} </md-option>
    </md-select>
</md-input-container>

Would anyone have an idea how to accomplish this?

Upvotes: 0

Views: 39

Answers (1)

miqh
miqh

Reputation: 3664

You could pass along additional arguments in the ng-change callbacks to help automatically set the other selections.

The underlying idea here would be to work out:

  • The newly selected option
  • The collection of options it belongs to
  • The position of the selected option in the collection which it belongs

Then once you have that position, you'd use it update all other selections, such that the selected options use the option at the same position.

Here's a quick demonstration of how you might achieve this.

Upvotes: 1

Related Questions