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

【问题标题】：How to refresh the multiple select box when the model is updated in AngularJs在AngularJs中更新模型时如何刷新多选框
【发布时间】：2017-11-09 10:06:28
【问题描述】：

请看下面的jsfiddle。我在这里举一个简单的例子来解释我想要实现的目标。

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

html页面：

<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文件：

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);

});

多选框的值会随着问题的变化而变化。我有一个模型 models.Dependency 存储这个多选框的选定值。当这两个问题发生变化时，models.Dependency 中存储的选定值也会发生变化。我的代码现在可以更改模型。问题发生变化时的依赖关系。但所选框的显示不会改变。我应该怎么做才能刷新多选框以反映models.Dependency中的新数据。

例如这两个问题是1-问题1、2-问题2。然后当我点击多选框时，我会看到两个选项：1-问题1、2-问题2。当我更改问题时，选项也会改变。如果我同时选择了这两个问题，多选框将显示为“1-问题 1，2-问题 2”。如果我将问题 1 的值更改为“新问题 1”。多选的显示保持不变。但是如果你点击它，你会看到选项已经被改变了。未选择更改的选项。这是不正确的。我希望选择更改的选项，并且此多选框的显示也更改为“1-New Question 1, 2-Question 2”。

我希望我清楚地解释我的要求。谢谢。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

看看：https://jsfiddle.net/u2nvj4fs/2/

一些事情：

您用于 md-select 的 ng-model 有错字（依赖而不是依赖）
每次打开下拉菜单时都会覆盖整个集合列表，因此它会覆盖项目并将其从列表中删除。

这个“或多或少”可以满足您的需求。它应该让你朝着正确的方向前进。我很乐意根据需要详细说明

【讨论】：