以编程方式更改模型时选择框不更新

Posted 2023-05-09

【中文标题】以编程方式更改模型时选择框不更新

【英文标题】：Select box not updating when model is changed programmatically

【发布时间】：2018-02-08 19:46:05

【问题描述】：

我在弹出窗口中有一个选择框，我分配了一个初始值，没有任何问题。但是，我想在打开弹出窗口时更改选择框的值，问题是尽管它“勾选”了更改的值，但除非我再次打开并关闭弹出窗口，否则它不会在选择框中显示它。有什么解决方案可以更新选择框，以便在我第一次打开弹出窗口时显示分配的值？

注意：在生产中，我使用 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');
  
);

【问题讨论】：

通过检查 select 我看到两个选项在标记中都有 'selected="selected"

【参考方案1】：

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

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

【讨论】：

你的小提琴不起作用，弹出窗口显示“！=”而不是“=”

@AKMorris 更新了我的答案，请检查:)

虽然这是一个答案，但对我来说仍然没用。我需要使用 angularJs ng-options（根据我的原始代码）来填充选择框，这意味着我不能像你一样硬编码 标签。

@AKMorris 更新了我的答案！

太好了，它现在可以工作了。必须两次分配值感觉不太好，但这是我现在必须使用的全部内容。

【参考方案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/

【讨论】：

我需要将模型设置为初始条件 ($scope.ccEditorFcComparator = "!=";)，然后在弹出窗口中设置为 "="。

此解决方案是否可以使用工厂或服务将“！=”的初始 ccEditorFcComparator 值从“myCtrl”控制器通信/传输到第二个“myPopup”控制器？基本上，我需要根据“myCtrl”中设置的初始值来确定弹出选择框的值，例如如果初始值为“！=”，则将弹出窗口设置为“=”。