Select 选项没有随着 ng-model 的变化而更新

Question

我有两个 select 标签（比如 Select 1 和 Select 2），它们分别带有 ng-model 变量并在 ng-change 触发器上调用不同的方法。我正在尝试通过 "Select 2" ng-change 调用的方法设置 "Select 1" 选项值。我发现此设置存在问题。如果用户 select 从 "Select 2" 下拉列表中选择一个值，"Select 1" 选项的值将正确更新。但是，如果用户 select 从 "Select 1" 获取值，然后当他尝试更改 "Select 2" 下拉列表的值时，"Select 1" 值不是 responding/changing。

请帮助我理解此行为并指导我克服此问题。

我创建了一个 plnkr 来捕捉这种行为。请检查 https://plnkr.co/edit/tGN4ZxdHprnpx7aD7Pen?p=preview

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

app.controller('MainCtrl', function($scope, $rootScope) {
  $scope.a = 'b';
  $scope.features = ['a', 'b', 'c'];
  $scope.roles = ['a', 'c', 'b'];
  $scope.b = function() {
    alert("feature changing");
  };
  $scope.call = function(a){
    console.log("call called : " + a);
    $rootScope.selectedFeature = '';
    $rootScope.selectedFeature = a;
  }
  $rootScope.selectedFeature = 'a';
});

我已经在此处复制了 app.js 代码

Answer 1

ng-model 以某种方式解析到本地范围而不是 rootScope。我通过在 HTML 中将其作为 rootScope 变量来解决这个问题。我已经更新了 plunkr https://plnkr.co/edit/tGN4ZxdHprnpx7aD7Pen?p=preview

<body ng-controller="MainCtrl">
    <div ng-if="selectedFeature">
      <span>Select 1: </span>
      <select ng-model="$root.selectedFeature" ng-options="feature for feature in features" ng-change="b()">
        </select>
    </div>
    <!--<input type="text" ng-model="a" ng-change="call(a)">-->
    <span>Select 2: </span>
    <select ng-model="$root.selectedRole" ng-options="role for role in roles" ng-change="call($root.selectedRole)">
    </select>
  </body>

Select 选项没有随着 ng-model 的变化而更新

Select option is not getting updated with change in ng-model

angularjs

angularjs-ng-change

angular-ngmodel