Javascript AngularJS-ngModel绑定下拉列表值可视地更改，而变量不更改

我有一个下拉列表：

<select
   ng-model="filter.country"
   ng-options="country.code as country.name for country in countries"
   ng-change="broadcast()">
   <option value="">All Countries</option>
</select>

$scope.countries最初由一个服务填充，然后另一个下拉列表更改事件将通过再次调用该服务并传递另一个下拉列表的选定项来限制$scope.countries的值

这里的问题是$scope.filter.country已绑定到默认值以外的值，并且$scope.countries更新为不包含$scope.filter.country值的新列表。我可以看到countries下拉列表恢复为默认选项All countries，但$scope.filter.country仍保持原样

对这种情况有什么想法吗？$scope.filter.country不应该更新回默认值吗

更新：这里是一个

更新：

为了说明这一点，这里有一个来自小提琴的屏幕截图：

对我来说，这确实像一个bug，我已经为它打开了一个新的窗口

---

更新：angularjs团队已经解决了这一问题

ng模型绑定到名为filter.country的范围变量。更新ng选项值时，不会触发更新filter.country的更改。在这一点上，它是一个独立的、不相关的变量。因此，不存在隐式绑定连接。仅在选择列表时，选择字段才会更新

尽管您可以在调用服务的位置轻松重置select model，或者在选项中包含$watch以重置ngmodel值

    $scope.$watch('countries', function() {
        //reset the model here
    });

您看到的行为正是双绑定应该如何工作： 大多数开发人员对双重绑定的感觉超过了理解。这种感觉是，对模型绑定输入的任何视觉更改都会导致模型更改

但是任何尝试过模式绑定JQuery日期选择器的开发人员都会证明这种现象：JQuery日期选择器不会更新绑定到相同输入的角度模型。换句话说，通过JQuery选择日期不会注册任何AngularJS事件

类似地，将值粘贴到模型绑定输入中通常不会导致模型更新

分析您的案例： 您已经更改了“模型绑定”下拉列表的选项列表。因此，显示的选项将恢复为默认->因为模型绑定值不是相关选项

Angular的ng模型不关心下拉列表中的选项列表。框架正在等待某个事件，该事件将导致它在摘要周期中运行并吸收所选值的变化。即使某些东西似乎发生了变化，但这是一种错觉或环洞，取决于你如何看待它

---

对于下拉选择元素，更改事件是单击一个选项。

我过去对此有问题。我花了很长时间才修好

尝试将您的选择替换为：

<select ng-model="changeMe" ng-options="d as d for d in dummyValues" ng-change="changeMeChange(); filter.country = undefined">
    <option value="">Change Me</option>
</select>

将filter.country=undefined添加到ng更改中应重置模型的值

---

希望这能解决您的问题。

如果选择的国家/地区的内容独立于changeMe的值，那么双向绑定在这里对我们没有帮助。相反，我们必须手动进行如下更改：

$scope.changeMeChange = function () {

    // this or a $scope.$watch for independent values in the changeMe drop down menu
    if ($scope.filter) {
        $scope.filter.country = null;
    }

    $scope.countries = [
        {
            "code": "MX",
            "name": "Mexico"
        }
    ];
};

'use strict';

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

function FilterCtrl($scope) {
    $scope.countries = [
        {
            "code": "KW",
            "name": "Kuwait"
        },
        {
            "code": "US",
            "name": "USA"
        },
        {
            "code": "MX",
            "name": "Mexico"
        }
    ];

    $scope.dummyValues = ['MX'];


    $scope.changeMeChange = function() {
        $scope.countries = [
            {
                "code": "MX",
                "name": "Mexico"
            }
        ];
    };
};

<select ng-model="changeMe" ng-options="d as d for d in dummyValues" ng-change="changeMeChange()">
    <option value="">Change Me</option>
</select>
<select ng-model="filter.country" ng-options="country.code as country.name for country in countries | filter: { code: changeMe} ">
    <option value="">All Countries</option>
</select>

如果changeMe select中的值可用于过滤国家/地区选择，从而使国家/地区选择依赖于change me select，则我们可以使用如下过滤器：

$scope.changeMeChange = function () {

    // this or a $scope.$watch for independent values in the changeMe drop down menu
    if ($scope.filter) {
        $scope.filter.country = null;
    }

    $scope.countries = [
        {
            "code": "MX",
            "name": "Mexico"
        }
    ];
};

'use strict';

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

function FilterCtrl($scope) {
    $scope.countries = [
        {
            "code": "KW",
            "name": "Kuwait"
        },
        {
            "code": "US",
            "name": "USA"
        },
        {
            "code": "MX",
            "name": "Mexico"
        }
    ];

    $scope.dummyValues = ['MX'];


    $scope.changeMeChange = function() {
        $scope.countries = [
            {
                "code": "MX",
                "name": "Mexico"
            }
        ];
    };
};

<select ng-model="changeMe" ng-options="d as d for d in dummyValues" ng-change="changeMeChange()">
    <option value="">Change Me</option>
</select>
<select ng-model="filter.country" ng-options="country.code as country.name for country in countries | filter: { code: changeMe} ">
    <option value="">All Countries</option>
</select>

使用过滤器方法，因为它似乎是更可能的用例。如果您希望您的用户在未选择“更改我”选项的情况下能够访问完整的国家/地区列表，那么a是一个不错的选择

希望这有帮助

            <table>
                <tr ng-init="states()">
                    <td>State</td>
                    <td><select ng-model="selectedState" data-ng-change="cities1()" data-ng-options="state.Id as state.Name for state in states" /></td>
                </tr>
                <tr>
                    <td>City</td>
                    <td><select ng-model="selectedCity" data-ng-options="city as city for city in cities" /></td>
                </tr>
            </table>

我不知道为什么会这样以及它是如何工作的，但是我必须创建一个cities1作为cities1的cities变量的副本。从cities iself分配cities1，然后使用cities1 on State combo ng change事件和cities on City combo ng model指令。

---

ng click似乎不是ng change的正确替代品。子组合框的内容应该在父状态组合中更改选定项时更改，而不是在有人单击父组合时更改。

也许我们可以玩小提琴？@Ronnie添加了一个小提琴，因为下拉菜单通过ng模型绑定到一个变量，该模型指示选定项和实际选定项正在视觉上更改，更新这个变量是有意义的，不是吗？尽管我和你有相同的观点，我想这可能是一个合理的原因。我想在这里从社区的一些专业人士那里了解我的问题的最新进展；这个问题已经在angularjs的新版本中得到解决和修复。