使用 sweetalert 时，html 下拉菜单不反映新条目答案

【问题标题】：When using sweetalert, html drop down not reflecting the new entry使用 sweetalert 时，html 下拉菜单不反映新条目
【发布时间】：2019-01-19 19:31:13
【问题描述】：

我有一个 HTML 下拉列表，并且下拉列表中已经有一些条目。现在，如果用户选择一个名为“新版本”的选项，我会打开一个询问版本名称的警告框，并将其推送到下拉项目列表中，然后从下拉列表中选择新输入的选项作为默认选项。现在，当我使用常规的 javascript 警报框时，一切都很顺利。新输入的版本是从下拉列表中选择的选项。但是，当我开始使用 sweetalert 时，这种行为就不再存在了。发生的情况是当用户选择“新版本”时，sweetalert 框打开，用户输入新版本名称，按确定，但下拉菜单仍将所选值显示为“新版本”，我没有看到新版本下拉列表中的名称。当我从下拉列表中选择另一个选项时，我只会在下拉列表中看到新版本，这基本上会“刷新”下拉列表，然后我可以看到我的新值。

相应的角度代码（使用可以正常工作的javascript警报）：

$scope.onSetDecisionVersion = function() {
    if($scope.requestDetails.decisionVersion == 'New Version') {
        var newVersionName = prompt("Please provide the name of the new version");
        $scope.requestDetails.decisionVersion = newVersionName;
        $scope.dcnVersions.push(newVersionName);
    }
}

甜心逻辑：

$scope.onSetDecisionVersion = function() {
    if($scope.requestDetails.decisionVersion == 'New Version') {

        swal({
            text:'Enter new version name:',
            content:'input',
            button: {
                text:"Enter",
                closeModal:true,
            },
        }).then(versionName => 
        this.updateDropDownList(versionName));  
    }
} 

 $scope.updateDropDownList = function(versionName) {
        $scope.requestDetails.decisionVersion = versionName;
        $scope.dcnVersions.push(versionName);

    }

html代码：

<label class="col-sm-4 col-form-label">Version</label>
<div class="col-sm-2">
    <select required="required" ng-options="versionName for versionName in dcnVersions"  class="wd100" ng-model="requestDetails.decisionVersion" ng-change='onSetDecisionVersion()'>
        <option ng-selected="true" value="">Select</option>
    </select>
</div>

我已经注释掉了代码的 sweetalert 部分。 javascript 警报框代码在那里并且按预期工作。我无法弄清楚为什么下拉菜单不会立即以甜蜜的警报反映新输入的版本。这是我用于 sweetalert 的 CDN：

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

另外，当我使用 sweetalert 逻辑将此 requestDetails.decisionVersion 发送到后端时，reguestDetails.decisionVersion 会读取正确的值，但无论出于何种原因，正确的值都不会反映在下拉列表中。

【问题讨论】：

评论在浏览器中被忽略，因此无法正常工作，或者您是否将其注释掉以确保我们知道它的哪一部分？
我注释掉了在 onSetDecisionVersion 函数中使用 swal 的逻辑
你看不到注释掉的代码吗？我能看到我的结局
注释被忽略，对于输出，它什么也不做
现在更新了，我添加了javascript alertbox logic和sweetalert box logic

标签： javascript html angular sweetalert

【解决方案1】：

你需要使用$timeout，因为angular js有不同的计时模式。

这是您的工作 jsfiddle 代码：http://jsfiddle.net/4wm1k6qs/

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

app.controller('sacontroller', function($scope, $timeout){
$scope.option = "Select One";
    $scope.options = ["Select One","a", "b", "New Version"];
  $scope.onOptionChange = function(){
  if($scope.option !== "New Version") return;
    onNewVersionSelect();
  }

  function onNewVersionSelect(){
   swal({
            text:'Enter new version name:',
            content:'input',
            button: {
                text:"Enter",
                closeModal:true,
            },
        }).then((text) =>{
            $scope.options.push(text);
          $timeout(function(){
            $scope.option = text;
          })
        })
  }


});

代码很好..你需要像这样使用 $timeout

$timeout(function(){
            $scope.option = text;
          })

【讨论】：