Опция выбора не обновляется при изменении ng-модели - PullRequest
0 голосов
/ 07 мая 2018

У меня есть два тега select (скажем, Select 1 & Select 2) с соответствующими переменными ng-модели и вызывающие отдельные методы для триггера ng-change. Я пытаюсь установить значение параметра «Выбрать 1» из метода, вызванного «Выбрать 2» ng-change. Я наблюдаю проблему с этой настройкой. Если пользователь выбирает значение из выпадающего меню «Выбрать 2», значение параметра «Выбрать 1» обновляется должным образом. Однако если пользователь выбирает значение из «Выбрать 1», а затем, когда он пытается изменить значение «Выбрать 2», значение «Выбрать 1» не отвечает / не изменяется.

Пожалуйста, помогите мне понять это поведение и рекомендации по преодолению этой проблемы.

Я создал 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 здесь

1 Ответ

0 голосов
/ 07 мая 2018

Каким-то образом модель ng разрешается в локальной области, а не в rootScope. Я решил проблему, используя ее в качестве переменной rootScope в HTML. Я обновил 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>
...