Angularjs Material - Syncing multiple select boxes

Question

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?

miqh · Accepted Answer · 2018-09-23 02:01:58Z

1

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.

answered Sep 23, 2018 at 2:01

miqh

3,6642 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Ellison Over a year ago

Thats what I was missing! Thank you so much!

Collectives™ on Stack Overflow

Angularjs Material - Syncing multiple select boxes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related