Angularjs Material - 同步多个选择框答案

【问题标题】：Angularjs Material - Syncing multiple select boxesAngularjs Material - 同步多个选择框
【发布时间】：2023-03-27 10:45:01
【问题描述】：

我有一个基本的 HTML 表单，用户可以在其中切换语言（法语、英语和双语）。在表格中，每种语言都有一个选择框，选择相同，但根据所选语言进行翻译。

我需要将它们全部同步，以便当用户选择选项 1 时，在任何框中，所有其他框都将位于选项 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>

有没有人知道如何做到这一点？

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

您可以在 ng-change 回调中传递其他参数，以帮助自动设置其他选择。

这里的基本想法是解决：

新选择的选项
它所属的选项集合
所选选项在其所属集合中的位置

然后，一旦您拥有该位置，您将使用它更新所有其他选择，以便选定的选项使用相同位置的选项。

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

【讨论】：

这就是我所缺少的！非常感谢！