Select 以编程方式更改模型时框未更新

Question

我在弹出窗口中有一个 select 框，我可以毫无问题地为其分配初始值。但是，我想在打开弹出窗口时更改 select 框的值，问题是尽管 "ticks" 更改后的值不会显示在 select 框中，除非我打开并再次关闭弹出窗口。任何使 select 框更新的解决方案，以便在我第一次打开弹出窗口时显示分配的值？

注意：在生产中我使用 angularJs 来填充 select 框并使用 jqmobile 来渲染它。

这是 fiddle 和代码：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

是否可以选择为弹出窗口创建另一个控制器并在那里设置所选选项？

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/

Answer 2

如果您使用 JQuery 函数 (.option()) 为 selectmenu 更改 select 的值，它会正确更新 select 框。

Ng-重复解决方案：

JSFiddle Demo

Ng-options解决方案：

JSFiddle Demo

注意：您还需要单独分配 ng-model 变量才能使此修复生效。

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

参考文献：

JQuery Select Menu Documentation

Select 以编程方式更改模型时框未更新

Select box not updating when model is changed programmatically

jquery-mobile

angularjs

drop-down-menu

jquery-mobile-popup