Angular-嘗試同步兩個下拉菜單

Question

我正在嘗試在Angular 1.4.7中同步兩個下拉列表，以便在更新一個下拉列表時將另一個下拉列表設置為相同的值，反之亦然。 似乎即時關閉但未同步，另一個下拉菜單更改為默認的“選擇”值。

這是正在處理的網站上問題的簡化版本。 有問題的站點是非常數據驅動的，因此我希望可以在此結構中使用它。 也就是說，一個inputData對象數組，每個對象都包含月份數組和selectedMonth屬性。

除此新要求外，該應用程序運行正常。 我想念什么？

我提供了源代碼和顯示問題的插件。

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>

控制器-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;

這是工作的plnkr

Answer 2

jQuery擴展

$.extend({},"June")

回報

{
    "0": "J",
    "1": "u",
    "2": "n",
    "3": "e"
}

更新此功能

function SyncDropdowns (selectedInput) {
    for(var i = 0; i < $scope.inputData.length ; i++) {
        var currInput=$scope.inputData[i];
        if (currInput!=selectedInput){
            currInput.selectedMonth=selectedInput.selectedMonth;
        }
    }
}

更新的plnkr

Answer 3

在ng-repeat內部，每個實例都有自己的作用域。 嘗試在ng-model使用$parent.input.selectedMonth