以編程方式更改模型時選擇框未更新

Question

我有一個彈出框中的選擇框，我沒有任何問題地分配一個初始值。但是，當我打開彈出窗口時，我想要更改選擇框的值，儘管它會「更改」已更改的值，但它不會顯示在選擇框中，除非我再次打開並關閉彈出窗口。任何解決方案，使選擇框更新，以便當我第一次打開彈出窗口分配的值顯示？

注：在生產中我使用angularJs來填充選擇框和jqmobile來呈現它。

這裏是小提琴和代碼：https://jsfiddle.net/AKMorris/ufcasngf/6/

<button ng-click="openPopup()">open popup</button> 
    <div data-role="popup" id="mypopup" data-overlay-theme="d" data-theme="none"> 
    <select id="fcComparator" 
      ng-model="ccEditorFcComparator" 
      ng-options="fcEnumComp for fcEnumComp in ccEditorDefaultComparators" 
      > 
    </select> 
    </div> 

的JS：

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

app.controller('myCtrl', function($scope) { 
    $scope.ccEditorDefaultComparators = ["=","!="]; 
    $scope.ccEditorFcComparator = "!="; 

    $scope.openPopup = function() 
    { 
    $('#mypopup').popup(); 
    $('#mypopup').popup('open', { y: 0 }); 

    console.log("should switch to = now"); 
     $scope.ccEditorFcComparator = "="; 

     //this makes it work the second time you open the popup 
    $('#fcComparator').selectmenu('refresh'); 
    } 
}); 

Answer 1

如果您selectmenu更改使用jQuery函數（.option()）選擇的價值，它正確地更新選擇框。

伍重複的解決方案：

JSFiddle Demo

吳選項解決方案：

JSFiddle Demo

注：您需要separetely分配NG-模型變量也爲此修復工作。

JS：

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

app.controller('myCtrl', function($scope) { 
    $scope.ccEditorDefaultComparators = ["=","!="]; 
    $scope.ccEditorFcComparator = "!="; 

    $scope.openPopup = function() 
    { 
    $('#fcComparator').selectmenu('refresh'); 
    $('#mypopup').popup(); 
    $('#mypopup').popup('open', { y: 0 }); 
    console.log("should switch to = now"); 
     $('#fcComparator').val("="); 
     $scope.ccEditorFcComparator = "="; 
     //this makes it work the second time you open the popup 
    $('#fcComparator').selectmenu('refresh'); 
    } 
}); 

參考文獻：

1. JQuery Select Menu Documentation

Answer 2

難道是剛剛創建另一個控制器彈出和所選擇的選項有設置一個選項？

HTML

<div data-ng-app='myApp' data-ng-controller='myCtrl'> 

    <button id="popup-btn" ng-click="openPopup()">open popup</button> 

    <div data-role="popup" id="mypopup" data-overlay-theme="d" data-theme="none" ng-controller="myPopup"> 
    <select id="fcComparator" 
     ng-model="ccEditorFcComparator" 
     ng-options="fcEnumComp for fcEnumComp in ccEditorDefaultComparators"> 
    </select> 
    </div> 

</div> 

的Javascript

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

app.controller('myCtrl', function($scope, $timeout) { 
    $scope.openPopup = function() { 
    $('#mypopup').popup(); 
    $('#mypopup').popup('open', { y: 0 }); 
    } 
}); 

app.controller('myPopup', function($scope, $timeout) { 
    $scope.ccEditorDefaultComparators = ["=","!="]; 
    $scope.ccEditorFcComparator = "="; 
}); 

https://jsfiddle.net/wjjafupf/