如何在AngularJs中更新模型时刷新多选框

Question

Please see the following jsfiddle. I put a simple example here to explain what I want to achieve.

https://jsfiddle.net/nz9h6aje/1/

html page:

<div ng-app="testApp" ng-controller="testCtrl">
1- <md-input-container>
<label>Question</label>
<input ng-model="models.Question1">
</md-input-container>
2- <md-input-container>
<label>Question</label>
<input ng-model="models.Question2">
</md-input-container>
<md-select  placeholder="Dependency" ng-model="models.Denpendency" md-on-open="getQuestionSet()" style="min-width: 300px;" multiple>
<md-option ng-value="setQuestion" ng-repeat="setQuestion in setQuestions">{{setQuestion}}</md-option>
</md-select>
</div>

js file:

angular.module('testApp', ['ngAnimate',
'ngAria',
'ngMaterial']).controller('testCtrl',function($scope){
$scope.models={
Question1:"",
Question2:"",
Dependency:[]           
}

$scope.getQuestionSet = function() {
  $scope.setQuestions = [];
  var tmpQuestion = 1 + " - " +$scope.models.Question1;
    $scope.setQuestions.push(tmpQuestion);
    tmpQuestion = 2 + " - " +$scope.models.Question2;
    $scope.setQuestions.push(tmpQuestion);
};

 $scope.$watch('models', function (newVal, oldVal) {
  if (newVal.Question1 !== oldVal.Question1) {
        var tmpQuestion = 1 + " - " +$scope.models.Question1;
      $scope.models.Dependency[0] = tmpQuestion;
  }
  if (newVal.Question2 !== oldVal.Question2) {
        var tmpQuestion = 2 + " - " +$scope.models.Question2;
      $scope.models.Dependency[1] = tmpQuestion;
  }
}, true);

});

The value of the multiple selected box will change when the question changes. I have a model models.Dependency that stores the selected value of this multiple selected box. When the two questions changes, the selected value stored in the models.Dependency will changed as well. My codes now can change the models.Dependency when the questions changes. But the display of the selected box won't change. What should I do to refresh the multiple selected box to reflect the new data in models.Dependency.

For example, the two questions are 1- Question 1, 2-Question 2. Then when I click the multiple select box, I will see two options: 1-Question 1, 2-Question 2. When I changes the Questions, the options will change as well. If I selected both of these two Questions, the multiple select box will display as "1-Question 1, 2-Question 2". If I changes the value of Question 1 to "New Question 1". The display of the multiple select remains the same. But if you click it, you will see the options has already been changed. The changed option is not selected. This is not correct. I want the changed option is selected and the display of this multiple select box also changes to "1-New Question 1, 2-Question 2".

I hope I explain my requirement clearly. Thank you.

Answer 1

Take a look at: https://jsfiddle.net/u2nvj4fs/2/

A few things:

1. your ng-model for md-select has a typo (Denpendency instead of Dependency)
2. You are overwriting the whole set list every time you open the dropdown so it's overwriting the items and removing them from the list.

This "more or less" does what you're looking for. It should get you headed in the right direction. I'd be happy to elaborate as needed