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

Question

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

对应的angular代码（使用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 读取了正确的值，但出于某种原因，正确的值未反映在下拉列表中。

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

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

When using sweetalert, html drop down not reflecting the new entry

html

javascript

sweetalert

angular