1
次のjsfiddleを参照してください。ここで私が達成したいことを説明するための簡単な例を示します。AngularJsでモデルが更新されたときに複数の選択ボックスをリフレッシュする方法
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);
});
は、複数選択ボックスの値が変更されます。私はモデルモデルを持っています。この複数選択されたボックスの選択値を格納する依存。 2つの質問が変わると、models.Dependencyに保存されている選択された値も同様に変更されます。私のコードは今、モデルを変更することができます。しかし、選択したボックスの表示は変わりません。複数の選択されたボックスをリフレッシュしてモデルの新しいデータを反映させるにはどうすればよいですか。
たとえば、2つの質問は1-質問1,2-質問2です。次に複数の選択ボックスをクリックすると、1つの質問1,2質問2が表示されます。質問、オプションも同様に変更されます。 これらの2つの質問の両方を選択すると、複数選択ボックスに「1質問1,2質問2」と表示されます。質問1の値を「新しい質問1」に変更した場合。複数選択の表示は同じままです。しかし、それをクリックすると、オプションが既に変更されていることがわかります。変更されたオプションは選択されていません。これは正しくありません。変更されたオプションが選択され、この複数の選択ボックスの表示も「1-新しい質問1,2-質問2」に変わります。
私は私の要求をはっきりと説明したいと思う。 ありがとうございます。