javascript - Angular - 尝试同步两个下拉菜单

Question

我正在尝试同步 Angular 1.4.7 中的两个下拉列表，以便在更新一个下拉列表时将另一个设置为相同的值，反之亦然。看起来我很接近，但不是同步，另一个下拉列表更改为默认的“选择”值。

这是我正在处理的站点上的一个问题的简化版本。有问题的网站是非常数据驱动的，所以我希望让它在这个结构中工作。也就是说，一个 inputData 对象数组，每个对象都包含月份数组和一个 selectedMonth 属性。

应用程序工作正常，除了这个新要求。我错过了什么？

我包括了源代码和显示问题的 plunker。

https://plnkr.co/edit/wSsBO4dHP0SR6HliP0b8?p=preview

HTML

<div class="form-group" ng-repeat="input in inputData">

     <select name="inputMonth__{$index}}" id="inputMonth__ID_{{$index}}" 
            ng-model="input.selectedMonth"
            ng-change="option_changed(input)"
            ng-options="month as month for month in input.Months "  >
        <option value="" style="display:none">Select</option>
    </select>
    <br><br>

</div>

Controller - test.js

'use strict';

var app = angular.module('app',[]);

app.controller('testController', ['$scope', function ($scope) {


    $scope.inputData=[];
    $scope.inputData.push(new inputData());
    $scope.inputData.push(new inputData());


    $scope.option_changed = function(Input) {

        SyncDropdowns(Input)


    };

        function SyncDropdowns(selectedInput){


            for(var i = 0; i < $scope.inputData.length ; i++) {

                var currInput=$scope.inputData[i];
                if (currInput!=selectedInput){
                    currInput.selectedMonth=$.extend({}, selectedInput.selectedMonth);

                }
            }
    }


    function inputData(){
        this.selectedMonth={};
        this.Months=["April", "May", "June", "July"];
    }

}]);

Answer 1

不确定你打算在这里做什么

currInput.selectedMonth=$.extend({}, selectedInput.selectedMonth);

我将其更改为以下内容并且同步良好。

currInput.selectedMonth=selectedInput.selectedMonth;

这是 working plnkr