Question

我有一个基本的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>

有人会知道如何实现吗？

Answer 1

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

这里的基本思想是解决：

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

然后，一旦您拥有该位置，就可以使用它来更新所有其他选择，以便所选的选项在同一位置使用该选项。

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

Angularjs材质-同步多个选择框

1 个答案: